Home Ask Login Register

Developers Planet

Your answer is one click away!

Tommaso Sebastianelli February 2016

AngularJS model parsing without user input event

I'm implementing Dale Lotts datetimepicker and dateTimeInput modules in my app;

//my input
<input data-ng-model="order.startDate" data-date-time-input="DD/MM/YYYY hh:mm" data-date-formats="['DD/MM/YYYY hh:mm', 'D/M/YYYY', 'D/M/YYYY h:mm', 'D/M/YYYY h.mm']" type="text" class="field start-field font-l inline numeric" ng-focus="datetime.order.start = true" />
//my datetimepicker
<datetimepicker id="datetime-order" data-on-set-time="datetime.order.start=false" data-ng-model="order.startDate" data-datetimepicker-config="{ minView: 'hour'}"></datetimepicker>

The input and the datetimepicker are binded together by data-ng-model so when i pick a date from the datetimepicker the value is formatted and displayed in the input.

data-model-type="YYYY-MM-DDTHH:mm:ss" in the input is added to adapt the model value in compatible format for my api, but it's not working: when i pick a date from the datetimepicker the input model is not formatted using the given params but it's formatted in the standard Data format instead. The model-type attribute only works when there is a user event directly on the input, followed by a blur event.

I tried to add a watcher on the input value and force the $parsers execution updating the $viewValue

//inside dateTimeInput directive
   scope.$watch(function(){
 return element.val();
}, function(){
 controller.$setViewValue(controller.$viewValue);
});

but didn't work, and then i tried to simulate a user action on the input updating the element value and then triggering a blur event

scope.$watch(function(){
     return element.val();
    }, function(){
     element.val(controller.$viewValue);
     element.triggerHandler('input');
    });

but this

Answers


Tommaso Sebastianelli February 2016

I resolved simply configuring the datetimepicker model instead of parsing the input model:

<datetimepicker ... data-datetimepicker-config="{ minView: 'hour', **modelType: 'YYYY-MM-DDTHH:mm:ss'**}"></datetimepicker>

Post Status

Asked in February 2016
Viewed 2,910 times
Voted 5
Answered 1 times

Search




Leave an answer


Quote of the day: live life