Currently trying to use a standard datepicker but bine it with an input mask to make it easier to enter the date by hand if the user needs to.
See Plunk
The problem at the moment is that when I add the mask one of two things happens, either hand typing the date into the field doesn't work (meaning as soon as I finish it deletes the value from the field) OR it succeeds in updating the model value but when I open the datepicker it is set to the year 1500.
The plunk has both a masked and unmasked version of the input.
HTML
<input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min-date="'2010-01-02'" max-date="dt" ng-required="true" close-text="Close" show-weeks="false" show-button-bar="false" ui-mask="99/99/9999" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
JS
.controller('DatepickerDemoCtrl', function ($scope) {
$scope.dt = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
Currently trying to use a standard datepicker but bine it with an input mask to make it easier to enter the date by hand if the user needs to.
See Plunk
The problem at the moment is that when I add the mask one of two things happens, either hand typing the date into the field doesn't work (meaning as soon as I finish it deletes the value from the field) OR it succeeds in updating the model value but when I open the datepicker it is set to the year 1500.
The plunk has both a masked and unmasked version of the input.
HTML
<input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min-date="'2010-01-02'" max-date="dt" ng-required="true" close-text="Close" show-weeks="false" show-button-bar="false" ui-mask="99/99/9999" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
JS
.controller('DatepickerDemoCtrl', function ($scope) {
$scope.dt = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
2 Answers
Reset to default 1datetimepicker master is the solution
jQuery('#datetimepicker_mask').datetimepicker({
timepicker:false,
mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});
http://xdsoft/jqplugins/datetimepicker/
You don't need mask as the api will do it for you
<input class='form-control' data-provide='datepicker' data-date-format='yyyy-mm-dd'>