Angular bootstrap datepicker 日期格式不会格式化 ng-model 值 - IT屋-程序员软件开发技术分享社区
首页 其他开发 Angular bootstrap datepicker 日期格式不会格式化 ng-model 值
Angular bootstrap datepicker 日期格式不会格式化 ng-model 值
[英] Angular bootstrap datepicker date format does not format ng-model value
本文介绍了Angular bootstrap datepicker 日期格式不会格式化 ng-model 值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 angular 应用程序中使用引导程序日期选择器.但是，当我从我绑定的日期选择器基础 ng-model 中选择一个日期时，我希望该 ng-model 采用一种日期格式MM/dd/yyyy".但它每次都像这样约会
"2009-02-03T18:30:00.000Z"代替
02/04/2009我为相同的 plunkr 链接创建了一个 plunkr 链接
我的 Html 和控制器代码如下
<html ng-app="plunker"><头><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"><身体><div ng-controller="DatepickerDemoCtrl"><pre>选择的日期是:<em>{{dt |日期:'MM/dd/yyyy' }}</em></pre><p>above 过滤器只会更新上面的 UI，但我想更新实际的 ng-model</p><h4>弹出窗口</h4><div class="row"><div class="col-md-6"><p class="输入组"><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"日期禁用=禁用(日期，模式)"ng-required="true" close-text="关闭"/><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 class="row"><div class="col-md-6"><label>格式:</label><select class="form-control" ng-model="format" ng-options="f for f informats"><option></option></select>
</div>--><小时/>{{dt}}
</html>角度控制器
angular.module('plunker', ['ui.bootstrap']);var DatepickerDemoCtrl = 函数($scope){$scope.open = function($event) {$event.preventDefault();$event.stopPropagation();$scope.opened = true;};$scope.dateOptions = {formatYear: 'yy',起始日:1};$scope.format = 'dd-MMMM-yyyy';};预先感谢您查看我的问题.
更新
我正在调用下面的方法来发布我的数据，VAR 是大小为 900 的数组，其中包含日期选择器变量.
public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {var query = this.EntityQuery.from('SaveFormData').withParameters({$方法:'POST'，$encoding: 'JSON',$数据:{VAR:formToSave.VAR，X:formToSave.X，CurrentForm: formToSave.currentForm,}});var deferred = this.q.defer();this.manager.executeQuery(query).then((response) => {deferred.resolve(响应);}, (错误) =>{deferred.reject(error);});返回 deferred.promise;}
解决方案
虽然已经发布了类似的答案，但我还是想贡献对我来说似乎是最简单和最干净的解决方案.假设您使用的是 AngularUI 日期选择器 ，并且您的 ng-Model 初始值未格式化，只需将以下指令添加到您的项目中即可解决问题:
angular.module('yourAppName').directive('datepickerPopup', function (){返回 {限制:'EAC'，要求:'ngModel'，链接:功能(范围，元素，属性，控制器){//从输入指令中删除默认格式化程序以防止冲突控制器.$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.
这篇关于Angular bootstrap datepicker 日期格式不会格式化 ng-model 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
