twitter-bootstrap 带有输入掩码的 UI-Bootstrap 日期选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30198127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:40:01  来源:igfitidea点击:

UI-Bootstrap datepicker with input mask

javascriptangularjstwitter-bootstrapdatepickermasking

提问by diplosaurus

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) ORit succeeds in updating the model value but when I open the datepickerit is set to the year 1500.

目前的问题是,当我添加的两件事情面具情况发生,无论是手动输入的日期到字段不工作(只要我完成它会删除该字段的值含义)它的更新成功模型值但是当我打开datepicker它时它被设置为年份1500

The plunk has both a masked and unmasked version of the input.

plunk 具有输入的屏蔽和未屏蔽版本。

HTML

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

JS

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

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

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

回答by Info

You don't need mask as the api will do it for you

你不需要掩码,因为 api 会为你做

<input class='form-control' data-provide='datepicker' data-date-format='yyyy-mm-dd'>

回答by B.Jimenez

datetimepicker master is the solution

datetimepicker master 是解决方案

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/

http://xdsoft.net/jqplugins/datetimepicker/