我想用这种方式使用ui-datepicker。它给出了一个错误: TypeError:无法设置未定义的属性'date'。如何解决这个错误?
var app = angular.module('edge',['formly','formlyBootstrap','ui.bootstrap']);
app.run(function(formlyConfig) {
var attribute={};
var attributes = [
'date-disabled',
'custom-class',
'show-weeks',
'starting-day',
'init-date',
'min-mode',
'max-mode',
'format-day',
'format-month',
'format-year',
'format-day-header',
'format-day-title',
'format-month-title',
'year-range',
'shortcut-propagation',
'datepicker-popup',
'show-button-bar',
'current-text',
'clear-text',
'close-text',
'close-on-date-selection',
'datepicker-append-to-body'
];
var bindings = [
'datepicker-mode',
'min-date',
'max-date'
];
var ngModelAttrs = {};
angular.forEach(attributes, function(attr) {
ngModelAttrs[camelize(attr)] = {attribute: attr};
});
angular.forEach(bindings, function(binding) {
ngModelAttrs[camelize(binding)] = {bound: binding};
});
console.log(ngModelAttrs);
formlyConfig.setType({
name: 'datepicker',
template: '<input class="form-control" ng-model="model[options.key]" is-open="to.isOpen" datepicker-options="to.datepickerOptions" />',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
defaultOptions: {
ngModelAttrs: ngModelAttrs,
templateOptions: {
addonLeft: {
class: 'glyphicon glyphicon-calendar',
onClick: function(options, scope) {
options.templateOptions.isOpen = !options.templateOptions.isOpen;
}
},
onFocus: function($viewValue, $modelValue, scope) {
scope.to.isOpen = !scope.to.isOpen;
},
datepickerOptions: {}
}
}
});
function camelize(string) {
string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
return chr ? chr.toUpperCase() : '';
});
// Ensure 1st char is always lowercase
return string.replace(/^([A-Z])/, function(match, chr) {
return chr ? chr.toLowerCase() : '';
});
}
});
app.controller('MainController', function MainController(formlyVersion)
{
var vm = this;
vm.model = {};
vm.options = {};
vm.form_submit=function(item_name){
console.log(item_name);
}
vm.rentalFields = [
{
template: '<hr /><div> <h1>Payment</h1></div>'
},
{
className: 'row',
fieldGroup: [
{
className: 'col-xs-4',
type: 'datepicker',
key: 'process-date123',
templateOptions: {
type: 'text',
datepickerPopup: 'dd-MMMM-yyyy',
label: 'Process Date:\n(MM/DD/YYYY):'
}
}
])