angular修改ng-model值,修改datepicker的值

最近用到angular和php做项目,时间日期插件用的是ui-bootstrap-tpls里的datepicker,就是引入了bootstrap的datepicker,发现一个很奇怪的问题,也可能是我自己没配置好吧

代码如下:

<div class="col-lg-2-4 m-b-xs" ng-controller="DatepickerDemoCtrl">
    <div class="input-group w-md" style="width:100%">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="user.end"
               is-open="opened"
               datepicker-options="dateOptions" 
	       placeholder="到期日期" 
               ng-required="true" current-text="今天"
               clear-text='清除'
		text-transform
close-text='关闭' close-text="Close"/> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </div></div>


我发现我用model传值的时候,model的值是一个时间日期对象,而且还是iso8601时间格式,并且由于我没有使用中文版本,导致隔了8个小时的时差,在我提交表单的时候,由于有很多字段,我统一使用的提交model,model命名都是user.xxx的格式,然后直接提交了 formName.user,然后问题就来了,传递过去的时间格式都是类似这种‘2017-05-01T16:00:00.000Z’,实际选择的是2017-05-02,隔了8小时时差,关键是这类型在后台处理感觉太恶心,然后我就想到传值前改一下model的值,我直接获取value是正确的,想到所有表单都是传递model值,日期的又要获取value太麻烦,所以就有了修改ng-model值的想法,方法如下:

注意html代码里有个text-transform的属性,其实就是通过在js里定义一个

directive去修改model值,代码如下:
.directive('textTransform', function () {
    return {
        require: 'ngModel',
        link: function(scope, element, iAttrs, modelCtrl) {
                modelCtrl.$parsers.push(function(input) {
                /*    var y = input.getFullYear();
                    var m = input.getMonth() + 1;
                    var d = input.getDate();
                    m = m < 10 ? '0' + m : m;
                    d = d < 10 ? '0' + d : d;
                    return y + '-' + m + '-' + d;*/这段是处理model值的,可以进行其他逻辑处理
                });
        }
    };
});
就是这么修改model值

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值