最初在范围内设置值时,Datepicker-popup格式化不起作用 [英] Datepicker-popup formatting not working when value set initially in scope
问题描述
我在Plunker上使用此自定义指令使用Angular UI引导日期选择器弹出窗口(
终于找到了解决方案。我从Angular-UI-Bootstrap更改为uib-datepicker指令,现在它在控制器中设置日期时正确格式化日期!这是我的指令中的HTML模板供参考:
template:'< p class =input-group>' +
'< input type =textstyle =cursor:pointerclass =form-controluib-datepicker-popup ={{format}}'+
'ng- model =ngModelis-open =open'+
'min-date =minDatemax-date =maxDate'+
'datepicker-options =dateOptionsdate-disabled =禁用(日期,模式)'+
'ng-required =dtpRequiredclose-text =关闭ng-readonly =ngReadonlyng-click =openPopup()/>' +
'< span class =input-group-btn>'+
'< button type =buttonclass =btn btn-defaultng-click =openPopup( $ event)>'+
'< i class =fa fa-calendar>< / i>< / button>'+
'< / span>'+
'< / p>'
I am using the Angular UI bootstrap date picker popup using this custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview):
//Module
var userModule = angular.module("userModule",['ui.bootstrap']);
//Controller
userModule.controller("sampleController", ['$scope', function ($scope) {
$scope.minDate = new Date();
}]);
//Directive code
userModule.directive('datePicker', [function (dateFilter) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: '=',
ngReadonly: '=?',
minDate: '=?',
maxDate: '=?',
dtpRequired: '=?',
dateOptions: '=?'
},
template: '<p class="input-group">' +
'<input type="text" style="cursor:pointer" class="form-control" datepicker-popup="{{format}}"' +
'ng-model="ngModel" is-open="opened"' +
'min-date="minDate" max-date="maxDate"' +
'datepicker-options="dateOptions" date-disabled="disabled(date, mode)"' +
'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
'<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
'<i class="fa fa-calendar"></i></button>' +
'</span>' +
'</p>',
controller: function ($scope) {
// check if it was defined. If not - set a default
$scope.dateOptions = $scope.dateOptions || {
formatYear: 'yy',
startingDay: 1,
showWeeks: false
};
$scope.openPopup = function ($event) {
if ($event !== undefined) {
$event.stopPropagation();
}
$scope.opened = true;
};
$scope.format = 'dd MMMM yyyy';
},
link: function ($scope, element, attrs, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
};
}]);
This is working fine and the date is formatted fine when selecting a date from the calendar popup. However if I set a date of the ng-model in the controller, the date isn't formatted as 'dd MMMM yyyy' and is returned as a date string like Sat Oct 01 2016 01:00:00 GMT+0100 (GMT Daylight Time). However in the Plunker, I am able to set a date in the controller and it is formatted fine. Here is my HTML for the date picker:
<date-picker ng-model="startDate.value" datepicker-options="dateOptions" min-date="minDate" ng-readonly="true"></date-picker>
In my controller startDate.value = new Date();
I'm not sure where the problem could be. The image below shows what I'm getting back.
Finally found a solution for this. I changed to the uib-datepicker directive from Angular-UI-Bootstrap and it now formats the date correctly when the date is set in the controller! Here's my HTML template from my directive for reference:
template: '<p class="input-group">' +
'<input type="text" style="cursor:pointer" class="form-control" uib-datepicker-popup="{{format}}"' +
'ng-model="ngModel" is-open="opened"' +
'min-date="minDate" max-date="maxDate"' +
'datepicker-options="dateOptions"date-disabled="disabled(date, mode)"' +
'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
'<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
'<i class="fa fa-calendar"></i></button>' +
'</span>' +
'</p>'
这篇关于最初在范围内设置值时,Datepicker-popup格式化不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!