admin管理员组

文章数量:1323005

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;
  };
});
Share Improve this question asked May 12, 2015 at 17:53 diplosaurusdiplosaurus 2,5885 gold badges29 silver badges56 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 1

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

本文标签: javascriptUIBootstrap datepicker with input maskStack Overflow