• 日期格式的处理和过滤


    <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,  160 
    { field: 'goFlightDateEnd', displayName: '出发结束日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, 160 }, { field: 'backFlightDateStart', displayName: '到达起始日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, 160 }, { field: 'backFlightDateEnd', displayName: '到达结束日期', enableSorting: false, cellFilter: 'momentFormat: "YYYY-MM-DD"', cellTooltip: true, enableCellEdit: false, minWidth: 30, 160 },

    效果图:

  • 相关阅读:
    cmd启动数据库时,出现 (无法启动此程序,因为计算机中丢失VCRUNTIME140_1.dll 尝试重新安装此程序以解决此问题 )解决方法。
    浅谈Promise语法API+封装
    浅谈JS回调地狱
    MySQL数据库安装步骤
    将MongoDB安装为Windows服务---安装MongoDB服务
    后缀.msc文件是什么?
    Mongoose类库使用教程---实现增删改查
    MongoDB可视化工具--Robo 3T 安装使用教程
    久违的锻炼
    出差(2~十四)
  • 原文地址:https://www.cnblogs.com/baihb/p/6731931.html
Copyright © 2020-2023  润新知