使用Bootstrap DateRangePicker Jquery插件,并帮助处理手动输入问题,我将date字段设置为只读,并使用了创建的范围,用户应从中选择所需的范围。像这样
// set datepicker
function cb(start, end) {
$('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY'));
}
$('#daterange').daterangepicker({
autoApply: true,
autoUpdateInput:true,
ranges: [
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This Week': [moment().startOf('week'), moment()],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
问题是,鉴于该字段是只读的,并且在日期选择器的界面上不存在执行该操作的按钮,该如何清除该字段的内容?
在dararange Picker的官方网站上,它们以某种方式提供了一个轻微的解决方案,即单击“取消”按钮时,您可以附加一个清除日期字段的事件。
$('#daterange').daterangepicker({
locale: { cancelLabel: 'Clear' }
});
$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
//do something, like clearing an input
$('#daterange').val('');
});
但这不是我打算做的。清除和取消以及有效操作。那么现在,我该怎么做呢?
我是这样做的:我在现有范围的顶部添加了一个名为“无”的范围,单击该字段将清除该字段。传递给该范围的值是两个空值,并且在cb
函数(或您用来操纵该字段的任何函数)上,我检查传递的日期是否有效,否则我清除了该字段(“无效”表示Null为或单击“无”。)。
<script>
// set datepicker
function cb(start, end) {
if(start._isValid && end._isValid)
{
$('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY'));
}
else
{
$('#daterange input').val('');
}
}
$('#daterange').daterangepicker({
autoApply: true,
autoUpdateInput:true,
ranges: {
'None': [null,null],
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This Week': [moment().startOf('week'), moment()],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句