twitter-bootstrap 角度引导日期选择器和手动日期输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18675280/
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
Angular bootstrap datepicker and manual date input
提问by
I am using angularjs, angular bootstap (this one) and their datepicker to enter date.
我正在使用 angularjs、angular bootstap（这个）和他们的日期选择器来输入日期。
<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true">
I want to be able to change date selected by datepicker manually. For example, I picked 07.09.2013 in datepicker and I want to change it to 07.09.2012. To do this, I click in my input and hit backspace to remove last digit 3 and put there 2. The problem is that when I do this, my ng-model becomes a string from a Date object and datepicker does not catch new date. You can try to do this on angular bootstap page (using firefox).
我希望能够手动更改日期选择器选择的日期。例如，我在 datepicker 中选择了 07.09.2013，我想将其更改为 07.09.2012。为此，我单击我的输入并按退格键删除最后一位数字 3 并将其放在那里 2。问题是，当我这样做时，我的 ng-model 变成了 Date 对象的字符串，而 datepicker 没有捕获新日期。您可以尝试在 angular bootstap 页面（使用 firefox）上执行此操作。
I understand that it is normal behavior because of input type text, which indicates browser that user can put there any text he want, and ng-model directive, because this is how it works. But is there a workaround for this problem? I thought that I need to monitor my ng-model using ng-change or $watch and convert it to a Date object using libraries mentioned here(I can't use Date.parse() because my date format is not valid for this function).
我知道这是正常行为，因为输入类型文本，这表明浏览器可以放置他想要的任何文本，以及 ng-model 指令，因为这就是它的工作原理。但是这个问题有解决方法吗？我认为我需要使用 ng-change 或 $watch 监视我的 ng-model 并使用这里提到的库将其转换为 Date 对象（我不能使用 Date.parse() 因为我的日期格式对于这个函数无效）。
My question is: are there any different solution to this problem? Any config flags or something angular-specific?
我的问题是：这个问题有什么不同的解决方案吗？任何配置标志或特定于角度的东西？
回答by SebastianRiemer
as far as I know, this behavior is well known by the community.
据我所知，这种行为在社区中是众所周知的。
There might be a possible solution/workaround described by wemoveon this site, have not tried it though but it looks promising.
wemove在这个网站上可能描述了一个可能的解决方案/解决方法，虽然还没有尝试过，但看起来很有希望。
Another possibility is to just use the underlying jquery datepicker directly, which (afaik) is wrapped by the angular directive. That's the way I do it for my project since i need to provide both, datepicker and manual input.
另一种可能性是直接使用底层的 jquery datepicker，它（afaik）由 angular 指令包装。这就是我为我的项目做的方式，因为我需要同时提供日期选择器和手动输入。
I've made a plnkr here, it's ugly but it works, i.e. you can either use the datepicker or enter the value manually.
我在这里做了一个 plnkr ，它很丑但它有效，即你可以使用日期选择器或手动输入值。
Seb
塞伯
回答by Paul Taylor
The date-picker-popupdirective formats output according to the format string you specify, however, it does not parse the value that you enter directly into the input element. To do that you currently have to write your own parse. Here's an example of one I use:
该date-picker-popup指令根据您指定的格式字符串格式化输出，但是，它不会解析您直接输入到输入元素中的值。为此，您目前必须编写自己的解析。这是我使用的一个示例：
evsDirectives.directive('dateParser', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
if (!ctrl)
return;
ctrl.$parsers.unshift(function (data) {
// convert data from view format to model format
return this.parseEuropeanShortDate(data);
});
}
};
//parses a date in dd/MM/yyyy format
//returns the input value if not a valid date
parseEuropeanShortDate: function (d) {
if (this.isDate(d)) {
return d;
}
else {
var fragments = d.split('/');
var result = new Date(Date.UTC(fragments[2], fragments[1] - 1, fragments[0])); // converted
return (this.isValidDate(result)) ? result : d;
}
}
});
You then apply it to your date-picker-popupinput element:
然后将其应用于date-picker-popup输入元素：
<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" date-parser>
回答by Mariusz Szpiler
The simplest way:
最简单的方法：
Add ng-change="onChange()" in your input tag
<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" ng- change="onChange()">Implement onChange() method:
$scope.onChange = function () { $scope.dt = $filter('date')($scope.dt, 'dd.mm.yyyy'); };
在输入标签中添加 ng-change="onChange()"
<input type="text" datepicker-popup="dd.mm.yyyy" ng-model="dt" datepicker-options="dateOptions" ng-required="true" ng- change="onChange()">实现 onChange() 方法：
$scope.onChange = function () { $scope.dt = $filter('date')($scope.dt, 'dd.mm.yyyy'); };
