angularjs - How to use Ui-datepicker in angular-formly? -
i want use ui-datepicker way. giving error: typeerror: cannot set property 'date' of undefined. how solve error?
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 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):' } } ])
Comments
Post a Comment