javascript daterangepicker 应用按钮无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31671732/
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
daterangepicker apply buttom not working properly
提问by Chinmay235
I am using daterangepicker please check my code here JSFIDDLE
我正在使用 daterangepicker 请在此处检查我的代码JSFIDDLE
I have set default date
我设置了默认日期
"endDate": "08/03/2015",
"endDate": "08/03/2015",
And I have set an alert()for checking my code is working or not.
我已经设置了一个alert()检查我的代码是否有效。
alert("New date range selected: '" + start.format('YYYY-MM-DD') + "' to '" + end.format('YYYY-MM-DD') + "'");
When I am clicking on book_datetextbox range calendar is appearing.
If i am changeing any date and clicking apply button its working fine. My alert()box is showing perfect. But when i click apply button without change any date. That time alert()box is not showing.
当我点击book_date文本框范围日历时出现。如果我要更改任何日期并单击应用按钮，则其工作正常。我的alert()盒子显示完美。但是当我单击应用按钮而不更改任何日期时。那个时间alert()框没有显示。
Also book_dateis getting default date after clicking textbox and click anywhere in the page. So i don't want to put any default date without cilcking particular date. textbox should be blank while clicking ouside of calendar.
也book_date被点击文本框，并在页面上任意位置单击后得到默认的日期。所以我不想在没有 cilcking 特定日期的情况下设置任何默认日期。单击日历的 ouside 时，文本框应为空白。
My Edited Code:
我编辑的代码：
$('#book_date').on('apply.daterangepicker', function(ev, picker) {
alert("New date range selected: '" + picker.startDate.format('YYYY-MM-DD') + "' to '" + picker.endDate.format('YYYY-MM-DD') + "'");
});
My textbox Calendar getting default value if i am not select any and clicking outside anywhere of the page.
如果我没有选择任何内容并在页面的任何位置之外单击，我的文本框日历将获得默认值。
回答by Ash
The callback function only executes when a newdate is selected. As a possible work-around you could use the apply.daterangepickerevent, which is triggered when the apply button is clicked:
回调函数仅在选择新日期时执行。作为一种可能的解决方法，您可以使用apply.daterangepicker单击应用按钮时触发的事件：
$('#book_date').on('apply.daterangepicker', function(ev, picker) {
var startDate = picker.startDate;
var endDate = picker.endDate;
alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});See an example here.
请参阅此处的示例。
Extended answer
扩展答案
There is no in-built way to prevent the dates being set when you click off the date picker, so you could try this:
当您单击日期选择器时，没有内置方法可以防止设置日期，因此您可以尝试以下操作：
Customise the hidefunction so the dates are cleared whenever the date picker is closed:
自定义hide函数，以便在日期选择器关闭时清除日期：
$('#book_date').on('hide.daterangepicker', function (ev, picker) {
$('#book_date').val('');
});
Update the applyfunction to populate the dates field accordingly. So the dates are only set when the apply button is clicked:
更新apply函数以相应地填充日期字段。因此，只有在单击应用按钮时才会设置日期：
$('#book_date').on('apply.daterangepicker', function (ev, picker) {
var startDate = picker.startDate;
var endDate = picker.endDate;
//MM/DD/YYYY format
$('#book_date').val(startDate.format('MM/DD/YYYY') + ' - ' + endDate.format('MM/DD/YYYY'));
});
Updated demo here.
在这里更新了演示。
回答by Manish Nayak
When we click apply button then callback function executes but there is condition. If the date range is changed then callback function will execute otherwise it will not execute. If you want to execute it every time when you click apply button regard less of date range changed or not then do following steps.
当我们点击应用按钮然后回调函数执行但有条件。如果日期范围发生变化，则回调函数将执行，否则不会执行。如果您想每次单击应用按钮时都执行它，请忽略更改的日期范围，然后执行以下步骤。
Open daterangepicker.js
Find hide function in DateRangePicker.prototype
Comment out the following condition which compares the new selected date range and old selected date range
hide: function (e) { this.container.hide(); //Below is the condition that checks for date range changes //if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) this.notify(); this.oldStartDate = this.startDate.clone(); this.oldEndDate = this.endDate.clone(); $(document).off('mousedown', this.hide); this.element.trigger('hidden', { picker: this });},
打开 daterangepicker.js
在 DateRangePicker.prototype 中找到隐藏功能
注释掉以下比较新选定日期范围和旧选定日期范围的条件
hide: function (e) { this.container.hide(); //Below is the condition that checks for date range changes //if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) this.notify(); this.oldStartDate = this.startDate.clone(); this.oldEndDate = this.endDate.clone(); $(document).off('mousedown', this.hide); this.element.trigger('hidden', { picker: this });},
or also comment this.notify() in hide function and place it in clickApply: function
或者也可以在隐藏函数中注释 this.notify() 并将其放置在 clickApply: 函数中
clickApply: function (e) {
this.updateInputText();
this.hide();
this.notify();
},
回答by user10065411
$(function () {
$('#start_date_id').on('apply.daterangepicker', function (ev, picker) {
var startDate = picker.startDate;
var endDate = picker.endDate;
alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});
});<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<input type="text" id="start_date_id" name="daterange" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</body>
</html>