1

我想以这种方式使用 ui-datepicker。它给出了一个错误： TypeError: Cannot set property 'date' of undefined。如何解决这个错误？

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):'

                                       }
                     }
                    ])
4

0 回答 0