获取daterangepicker引导程序的值。

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 bootstrap时遇到了一个问题。我确实实现了我得到的这个演示，但是我仍然无法从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?

“开始”和“结束”将包含日期的值。如果我想要这些值作为以后在我的项目中使用编码的输入，例如保存到数据库中，我如何称呼它们?

5 个解决方案

#1

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).ready function

为$(文档)中的按钮连接单击事件。准备好功能

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

The complete 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>  

#2

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

#3

You must retrieve the data object:

您必须检索数据对象:

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

Notice the _d request at the end to get the actual, javascript date object.

注意末尾的_d请求，以获取实际的javascript日期对象。

Also, if the data object is ever undefined then it can be the result of bootstrap.js being re-instantiated. This happened to me on a MVC page where I forgot to surround my scripts with:

此外，如果数据对象没有定义，那么它可能是引导的结果。js池。这发生在我的MVC页面上，我忘记在我的脚本周围加上:

@region scripts {

}

#4

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');

#5

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());
    });

})