jQuery 获取 daterangepicker bootstrap 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19651943/
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
getting the value of daterangepicker bootstrap
提问by user2541163
Hi im new to using javascript and encountered a problem while using daterangepicker bootstrap. I manage do implement this demo that i got but I am stuck at getting the value of start date and end date from the javascript.
嗨，我是使用 javascript 的新手，在使用 daterangepicker 引导程序时遇到了问题。我设法实现了我得到的这个演示，但我坚持从 javascript 获取开始日期和结束日期的值。
This is the javascript
这是javascript
<script type="text/javascript">
$(document).ready(function() {
$('#reportrange').daterangepicker(
{
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'DD/MM/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
});
</script>
This is the button which is going to handle to onclick method
这是将要处理 onclick 方法的按钮
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
'start' and 'end' would contain the values of the dates. If i want these values to serve as inputs for later use of coding in my project e.g. saving into database, how can i call them?
'start' 和 'end' 将包含日期的值。如果我希望这些值作为输入以供以后在我的项目中使用编码（例如保存到数据库中），我该如何调用它们？
回答by Razan Paul
$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;
回答by Jacques Snyman
Give your button an id
给你的按钮一个 id
<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>
Add startDate and endDate variables to your script
将 startDate 和 endDate 变量添加到您的脚本中
var startDate;
var endDate;
Set these variables in the daterangepicker callback
在 daterangepicker 回调中设置这些变量
startDate = start;
endDate = end;
Wire up the click event for that button in your $(document).readyfunction
在您的$(document).ready函数中连接该按钮的点击事件
$('#saveBtn').click(function(){
console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});
The complete javascript
完整的javascript
<script type="text/javascript">
var startDate;
var endDate;
$(document).ready(function() {
$('#reportrange').daterangepicker(
{
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'DD/MM/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
startDate = start;
endDate = end;
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
$('#saveBtn').click(function(){
console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});
});
</script>
回答by Erdogan
var endDate= $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');
or other formats;
或其他格式；
.endDate.format('YYYY-MM-DD');
.endDate.format('D MM YYYY');
.endDate.format('D MMMM YYYY');
回答by Chad Kuehn
You must retrieve the data object:
您必须检索数据对象：
var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;
Notice the _drequest at the end to get the actual, javascript date object.
请注意_d最后获取实际的 javascript 日期对象的请求。
Also, if the dataobject is ever undefinedthen it can be the result of bootstrap.jsbeing re-instantiated. This happened to me on a MVC page where I forgot to surround my scripts with:
此外，如果data对象永远存在，undefined那么它可能是bootstrap.js重新实例化的结果。这发生在我的 MVC 页面上，我忘记用以下内容包围我的脚本：
@region scripts {
}
回答by Deano
daterangepicker startDate and endDate returns moment objects not Javascript Date objects.
daterangepicker startDate 和 endDate 返回矩对象而不是 Javascript Date 对象。
Here is how to transform a moment object into a date object:
以下是将 moment 对象转换为 date 对象的方法：
let startDate = moment($('#selector').data('daterangepicker').startDate).toDate();
let endDate = moment($('#selector').data('daterangepicker').endDate).toDate();
回答by Gabriel Glauber
Simple, get direct the inputs range:
简单，直接获取输入范围：
$(document).ready(function(){
$('#reportrange span').bind('DOMSubtreeModified', function(e){
alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
});
})
回答by emrey
I know that this is not elegant at all. Sharing it anyway.
我知道这根本不优雅。随便分享一下。
First, we get the daterangepicker input box value:
首先，我们获取 daterangepicker 输入框值：
var date_range = $('#date_range').val();
Now if we configure to show the dates between a ' - ', let's split with it:
现在，如果我们配置为显示 ' - ' 之间的日期，让我们将其拆分：
var dates = date_range.split(" - ");
to get the dates as strings:
以字符串形式获取日期：
var start = dates[0];
var end = dates[1];
to get the dates as Moment objects with a 'D MMMM YY' format:
以“D MMMM YY”格式获取作为 Moment 对象的日期：
var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');
