Javascript 将日期范围选择器开始日期设置为空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36251020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting date range picker start date to blank
提问by Ege Bayrak
I have a daterange picker based on http://www.daterangepicker.com's daterange picker and I want to set the start date to empty. This will work for what I want to do.
我有一个基于http://www.daterangepicker.com的日期范围选择器的日期范围选择器，我想将开始日期设置为空。这将适用于我想做的事情。
I'm using an text input field to get the dates
我正在使用文本输入字段来获取日期
</span><input type="text" class="form-control" id="reservation" />
On the site there is an example of setting "Input Initially Empty" but I couldn't get it to work. Basically I don't know where to set it as it seems.
在网站上有一个设置“输入初始为空”的例子，但我无法让它工作。基本上我不知道在哪里设置它。
My daterange picker is inside a partial view and it called by another view. Page scripts are set in the view which calls the partial one. On the daterangepicker.js script I found these lines;
我的日期范围选择器在一个局部视图中，它被另一个视图调用。页面脚本设置在调用部分脚本的视图中。在 daterangepicker.js 脚本中，我找到了这些行；
//default settings for options
this.parentEl = 'body';
this.element = $(element);
this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.minDate = false;
this.maxDate = false;
this.dateLimit = false;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.showWeekNumbers = false;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.linkedCalendars = true;
this.autoUpdateInput = true;
this.ranges = {};
As far as I can tell they are based on moment.js. I tried manipulating this.startDatebut couldn't manage to set it to a blank value. using this.startdate = nullmade the whole date range picker stop working so I guess I need something like empty date equivalent of moment.js. Or something entirely different.
据我所知，它们是基于 moment.js。我尝试操作this.startDate但无法将其设置为空白值。使用this.startdate = null使整个日期范围选择器停止工作，所以我想我需要类似moment.js的空日期等价物。或者完全不同的东西。
Can anyone show me how to do it?
谁能告诉我怎么做？
回答by ishakkulekci
Input Initially Empty
输入最初为空
<input type="text" name="datefilter" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
or
或者
//daterangepickers
//moment.locale('tr');
moment.locale("@SessionHelper.CurrentLanguageTwoChar");
$(".date-control").daterangepicker({
singleDatePicker: true,
showDropdowns: true,
//timePicker: true,
//timePicker24Hour: true,
//timePickerSeconds: true,
minYear: parseInt(moment().subtract(10, 'years').format('YYYY'),10),
maxYear: parseInt(moment().add(10, 'years').format('YYYY'), 10),
autoUpdateInput: false,
singleClasses: "",
locale: {
//format: 'DD.MM.YYYY HH:mm:ss'
//format: 'DD.MM.YYYY'
}
});
$('.date-control').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('L'));
});
$('.date-control').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
http://www.daterangepicker.com/#example5
http://www.daterangepicker.com/#example5
回答by gotounix
autoUpdateInput: false
function (chosen_date) {
$('.form-datetime').val(chosen_date.format('YYYY-MM-DD'));
}
回答by tuanngocptn
for the daterangepickerinclude from dateand to dateplease flowing this code set start date to blank
对于daterangepicker包含from date，to date请将此代码设置开始日期设置为空白
$('.form-datetime').daterangepicker({autoUpdateInput: false}, (from_date, to_date) => {
console.log(from_date.toDate(), to_date.toDate());
$('.form-datetime').val(from_date.format('DD/MM/YYYY') + ' - ' + to_date.format('DD/MM/YYYY'));
});
Thanks.
谢谢。
