我遇到过同样的问题。这是我使用带有 Angularjs 的 Jquery-UI 日历所做的
日期格式为“2015-03-24T04:00:00”
首先修剪日期字符串以仅获取年、月和日期。
var date = "2015-03-24T04:00:00"
var formattedDate = date.match(/[\d-]+/).pop();
// formattedDate is now "2015-03-24" which is passed into
// the directive below as the input.$modelValue.
现在,在您的指令或控制器中执行以下操作...
// Here is directive example.
link: function( scope, element, attrs, input ){
element.datepicker( optionsObjectHere );
setInitialDateFormatOnInput();
function setInitialDateFormatOnInput(){
setTimeout(function(){ // This timeout is required to delay the directive for the input.modelValue to resolve, however, no actual delay occurs!
element.datepicker( "setDate", formatToJqueryUIDateFormat());
});
}
function formatToJqueryUIDateFormat(){
return $.datepicker.parseDate( 'yy-mm-dd', input.$modelValue );
// 'yy-mm-dd' needs to match the input.$modelValue format from above.
}
} // link
这就是我在输入中使用整个 jquery UI 的方式。
HTML
<input type="text" class="inline" ng-model="inputValue" my-calendar-popup="calendarOptions" />
其中 calendarOptions 是以下对象
var calendarOptions = { minDate: 0, buttonImage: "calendar-icon.png", buttonImageOnly: 'true', showOn: "both", dateFormat: "MM d, yy" };
指示
app.directive('myCalendarPopup', function(){
var defaultOptions = { minDate: 0, buttonImage: "calendar-icon.png", buttonImageOnly: 'true', showOn: "both", dateFormat: "MM d, yy" };
// defaultOptions just in case someone doesn't pass in options.
return {
require:'?ngModel',
restrict: 'A',
link: function( scope, element, attrs, input ){
if ( !input ){ return; } // If no ngModel then return;
element.datepicker( createCalendarOptions());
setInitialDateFormatOnInput();
function createCalendarOptions(){
if( !attrs.rsCalendarPopup ){ return addRequiredJqueryFunction( defaultOptions );}
return formatOptions();
}
function formatOptions() {
var options = scope.$eval( attrs.rsCalendarPopup );
// Turn string into object above.
return addRequiredJqueryFunction( options );
}
function addRequiredJqueryFunction( options ){
options.onSelect = changeDate;
// add onSelect to passed in object and reference local changeDate function, which will update changes to input.$modelValue.
return options;
}
function changeDate( date ){
input.$setViewValue( date );
}
function setInitialDateFormatOnInput(){
setTimeout(function(){
// This timeout is required to delay the directive for the input.modelValue to resolve.
// However, there is no actual timeout time. This is a must to get
// Angular to behave.
element.datepicker( "setDate", formatToJqueryUIDateFormat());
});
}
function formatToJqueryUIDateFormat(){
return $.datepicker.parseDate( 'yy-mm-dd', input.$modelValue );
// 'yy-mm-dd' is not the format you want the calendar to be
// it is the format the original date shows up as.
// you set your actual formatting using the calendar options at
// the top of this directive or inside the passed in options.
// The key is called dateFormat, in this case it's set as
// dateFormat: "MM d, yy" which makes June 30, 2015.
}
} // link
} // return
});
注意:我只能让它在它显示的配置中工作。我已将它添加到控制器,甚至是指令控制器,但无法重新创建初始日期条件。我还没弄清楚为什么会这样。也许该解决方案仅适用于嵌入在另一个隔离范围指令中的链接功能,并且由于特定时间而起作用。