获取daterangepicker引导程序的值

您好我刚接触使用javascript并在使用daterangepicker bootstrap时遇到问题。 我管理实现这个我得到的演示，但我坚持从javascript获取开始日期和结束日期的值。

这是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')); });  

这是将要处理onclick方法的按钮

 Save changes 

‘start’和’end’将包含日期的值。 如果我希望这些值作为输入以便以后在我的项目中使用编码，例如保存到数据库中，我该如何调用它们？

Answer 1

给你的按钮一个id

 Save changes 

将startDate和endDate变量添加到脚本中

 var startDate; var endDate; 

在daterangepicker回调中设置这些变量

 startDate = start; endDate = end; 

在$(document).ready函数中连接该按钮的click事件

 $('#saveBtn').click(function(){ console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY')); }); 

完整的JavaScript

Answer 2

 $('#IDOfDateRangePicker').data('daterangepicker').startDate; $('#IDOfDateRangePicker').data('daterangepicker').endDate; 

Answer 3

您必须检索数据对象：

 var startDate = $('#reportrange').data('daterangepicker').startDate._d; var endDate = $('#reportrange').data('daterangepicker').endDate._d; 

注意最后的_d请求以获取实际的javascript日期对象。

此外，如果data对象undefined那么它可能是重新实例化bootstrap.js的结果。 这发生在我的MVC页面上，我忘了用我的脚本包围：

 @region scripts { } 

Answer 4

 var endDate= $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD'); 

或其他格式;

 .endDate.format('YYYY-MM-DD'); .endDate.format('D MM YYYY'); .endDate.format('D MMMM YYYY'); 

Answer 5

简单，直接输入范围：

 $(document).ready(function(){ $('#reportrange span').bind('DOMSubtreeModified', function(e){ alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val()); }); })