Hi,
Today we will discuss how to define our custom date format for md-datepicker in angularJS.
1. You will need to install moment.js from nuget packages
![](data:image/png;base64,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)
2. Add reference of moment.min.js
<script src="~/Scripts/moment.min.js"></script>
3. Add below code snippet in your angularJS
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('DD/MM/YYYY') : '';
};
$mdDateLocaleProvider.parseDate = function (dateString) {
var m = moment(dateString, 'DD/MM/YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
}]);
And yes that's that simple.....
Happy Coding...
0 Comment(s)