角bootsrap日期选择器日期格式不格式化NG-模型值 [英] Angular bootsrap datepicker date format does not format ng-model value
问题描述
我用我的角度引导申请日期选择。然而，当我选择从日期选择器底层NG-model的日期，我有绑定得到更新我想那纳克模型于一体的日期格式MM / DD / YYYY。但每一个时代它使约会像这样
2009-02-03T18：30：00.000Z
而不是
02/04/2009
我已经创造了在同一 plunkr链接plunkr
我的HTML和控制器code是像下面
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js\"></script>
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js\"></script>
＆所述; SCRIPT SRC =example.js＆GT;＆下; /脚本＆GT;
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;
＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'MM / DD / YYYY'}}＆LT; / EM＆GT;＆LT; / pre＆GT;
＆LT; P＆gt;中的过滤器将只更新UI上面，但是我想更新的实际NG-MODLE＆LT; / P＆GT;
＆LT; H4＆GT;＆弹出LT; / H4＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT; p =类输入组＆GT;
＆LT;输入类型=文本级=表格控
日期选择器，弹出={{格式}}
NG-模式=DT
是开=打开闽日期=MINDATE
MAX-日期='2015年6月22日'
日期选择器选项=dateOptions
日期禁用=禁用（日期模式）
NG-所需=真密文=关闭/＆GT;
＆LT;跨度类=输入组BTN＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=打开（$事件）＆GT;
＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - ＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT;标签＆gt;格式：＆LT; /标签＆gt; ＆LT;选择类=表格控NG模型=格式NG选项=F对于f的格式＆GT;＆LT;选项＆GT;＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; - ＆GT; ＆LT;小时/＆GT;
{{DT}}
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
角控制器
angular.module（'plunker'，['ui.bootstrap']）;
VAR DatepickerDemoCtrl =功能（$范围）{
$ scope.open =功能（$事件）{
。$事件preventDefault（）;
$ event.stopPropagation（）; $ scope.opened = TRUE;
}; $ scope.dateOptions = {
formatYear：'YY'，
startingDay：1
};
$ scope.format ='DD-MMMM-YYYY';
};
在此先感谢审查我的问题。
更新
我打电话下面的方法张贴我的数据和VAR是大小900的数组，它包含日期选取器变量。
公共SaveCurrentData（formToSave：tsmodels.ResponseTransferCalculationModelTS）{ 变种查询= this.EntityQuery.from（'SaveFormData'）。withParameters（{
$方法：POST，
$编码：'JSON'，
$数据：{
VAR：formToSave.VAR，
X：formToSave.X，
CurrentForm：formToSave.currentForm，
}
}）; VAR递延= this.q.defer（）; this.manager.executeQuery（查询）。然后（（响应）=＆GT; {
deferred.resolve（响应）;
}，（错误）=＆GT; {
deferred.reject（错误）;
}）; 返回deferred.promise;
}
虽然类似的答案已经发布，我想贡献什么似乎是最简单和干净的修复给我。 假设你正在使用的AngularUI日期选择器并为您的NG-型号的初始值并没有得到根本的格式加入以下指令到您的项目将解决该问题：
angular.module（'yourAppName'）
.directive（'datepickerPopup'，函数（）{
返回{
限制：选管会，
要求：'ngModel'，
链接：功能（范围，元素，属性控制器）{
//从输入指令删除默认格式为prevent冲突
控制器$ formatters.shift（）。
}
}
}）;
我发现在 Github上AngularUI问题这个解决方案，因此，所有信贷那边去的人
I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every times makes date like this
"2009-02-03T18:30:00.000Z"
instead of
02/04/2009
I have created a plunkr for the same plunkr link
My Html and controller code is like below
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
<p>above filter will just update above UI but I want to update actual ng-modle</p>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{format}}"
ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<!--<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>-->
<hr />
{{dt}}
</div>
</body>
</html>
Angular controller
angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.format = 'dd-MMMM-yyyy';
};
Thanks in advance for review my question.
UPDATE
I am calling below method for posting my data and VAR is array of size 900 which contains date-picker variables.
public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {
var query = this.EntityQuery.from('SaveFormData').withParameters({
$method: 'POST',
$encoding: 'JSON',
$data: {
VAR: formToSave.VAR,
X: formToSave.X,
CurrentForm: formToSave.currentForm,
}
});
var deferred = this.q.defer();
this.manager.executeQuery(query).then((response) => {
deferred.resolve(response);
}, (error) => {
deferred.reject(error);
});
return deferred.promise;
}
Although similar answers have been posted I'd like to contribute what seemed to be the easiest and cleanest fix to me. Assuming you are using the AngularUI datepicker and your initial value for the ng-Model does not get formatted simply adding the following directive to your project will fix the issue:
angular.module('yourAppName')
.directive('datepickerPopup', function (){
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
}
});
I found this solution in the Github AngularUI issues and therefore all credit goes to the people over there.
这篇关于角bootsrap日期选择器日期格式不格式化NG-模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
