'UI-Bootstrap datepicker with input mask

Currently trying to use a standard datepicker but combine 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>

.controller('DatepickerDemoCtrl', function ($scope) {
  $scope.dt = new Date();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };
});

Solution 1:^[1]

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'>

Solution 2:^[2]

datetimepicker 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.net/jqplugins/datetimepicker/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Info
Solution 2	B.Jimenez

'UI-Bootstrap datepicker with input mask

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]