<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 },
效果图: