没有用户输入事件的 AngularJS 模型解析



我正在我的应用程序中实现戴尔·洛茨日期时间选择器和日期时间输入模块;

//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>

输入和日期时间选择器通过 data-ng-model 绑定在一起,因此当我从日期时间选择器中选择一个日期时,该值将被格式化并显示在输入中。

输入中添加了数据模型类型="YYYY-MM-DDTHH:mm:ss"以使模型值以兼容我的 API 格式,但它不起作用:当我从 DateTimepicker 中选择一个日期时,输入模型不是使用给定的参数进行格式化,而是以标准数据格式格式化。仅当输入上直接存在用户事件,后跟模糊事件时,模型类型属性才有效。

我试图在输入值上添加一个观察程序,并强制$parsers执行更新$viewValue

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

但没有奏效,然后我尝试模拟用户对输入的操作,更新元素值,然后触发模糊事件

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

但这也没有用。

如何在我从时间选择器中选择日期后手动强制解析器格式化我的输入模型?

我解决了简单地配置日期时间选择器模型而不是解析输入模型的问题:

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

相关内容

  • 没有找到相关文章

最新更新