日期格式的处理和过滤

<div class ="col-md-3">
                        <label class="distance">去程起始日期</label>
                     <input date-range-picker type="text" class="form-control" ng-model="vm.data.goFlightDateStart" min="vm.minDate" max="vm.maxDate" required
                               options="vm.singleDateOptions"/>
                  </div>

  这里我自己使用的是data-range-picker这款bootstrap下的日期控件,官网:http://www.daterangepicker.com/

    

挺实用的一款控件,现在在工作中总结一下这款控件中遇到的问题

1.如何去掉日期之后的具体时间点?

 //单个日期
            vm.singleDateOptions = {
                singleDatePicker: true,
                timePicker: false,
            }

效果图:

2.如何给日期添加一个范围

  <div class="col-md-4">
                            <label class="control-label">查询日期范围</label>
                            <input date-range-picker type="text" class="form-control" options="vm.dateRangeOptions" ng-model="vm.requestParamsFc" min="vm.dateRangeOptions.min" max="vm.dateRangeOptions.max" required>
                        </div>

  

  //日期样式
            vm.dateRangeOptions = app.createDateRangePickerOptions();
            vm.requestParamsFc = {
                startDate: moment().add(-10, 'day').format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD')
            };

  效果图:

3.如何在页面对日期格式进行过滤?

  { field: 'goFlightDateStart', displayName: '出发起始日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, width: 160 
{ field: 'goFlightDateEnd', displayName: '出发结束日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, width: 160 }, { field: 'backFlightDateStart', displayName: '到达起始日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, width: 160 }, { field: 'backFlightDateEnd', displayName: '到达结束日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, width: 160 },

效果图:

 

转载于:https://www.cnblogs.com/baihb/p/6731931.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值