无法将值从JQuery日期范围选取器传输到输入字段

Question

我正在使用此示例网站中的基本JQuery日期范围选取器：http://www.daterangepicker.com/。我正在寻找一种方法，从日期范围选取器中提取输出，并在选择日期后将它们放入两个输入字段。现在，我只想证明我可以在新的输入字段中显示每个值。将来，我会解析字符串以提供两个单独的日期，但现在请忽略此。

<input id="dateRangePicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015" /><br /> 
<input id="selectedDatePickerField" /><br /> 
<input id="selectedDatePickerField2" /> 

这是我到目前为止已经试过：

脚本：

<script type="text/javascript"> 
     //<![CDATA[ 
     $(function() { 
      $('input[name="daterange"]').daterangepicker(); 
      }); 
     }); 
     $(document).ready(function() { 
      $('#dateRangePicker').on('change', function() { 
       $('#selectedDatePickerField').val(this.value); 
       $('#selectedDatePickerField2').val(this.value); 
      }).change(); 
      $('#dateRangePicker').on('daterangepicker', function (e, ui) { 
       $('#selectedDatePickerField').val(ui.item.value); 
       $('#selectedDatePickerField2').val(ui.item.value); 
      }); 
     }); 
     //]]> 
    </script> 

如何从日期范围选择器的值移动到每个输入字段？

Answer 1

您需要在（'apply.daterangepicker'）上使用来获取日期选择器的startDate和endDate值以便输入字段。

$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) { 
    $('#selectedDatePickerField').val(picker.startDate.format('DD/MM/YYYY'));   
    $('#selectedDatePickerField2').val(picker.endDate.format('DD/MM/YYYY')); 
}); 

片段

//<![CDATA[ 
 
$(function() { 
 
    $('input[name="daterange"]').daterangepicker(); 
 
}); 
 
$(document).ready(function() { 
 
    $('#dateRangePicker').on('change', function() { 
 
    $('#selectedDatePickerField').val(this.value); 
 
    $('#selectedDatePickerField2').val(this.value); 
 
    }).change(); 
 
    $('#dateRangePicker').on('daterangepicker', function (e, ui) { 
 
    $('#selectedDatePickerField').val(ui.item.value); 
 
    $('#selectedDatePickerField2').val(ui.item.value); 
 
    }); 
 
}); 
 

 
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) { 
 
    $('#selectedDatePickerField').val(picker.startDate.format('DD/MM/YYYY'));  $('#selectedDatePickerField2').val(picker.endDate.format('DD/MM/YYYY')); 
 
});

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 
    
 
<!-- Include Date Range Picker --> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 
 
<input id="dateRangePicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015" /><br /> 
 
<input id="selectedDatePickerField" /><br /> 
 
<input id="selectedDatePickerField2" />

这里是工作的jsfiddle：https://jsfiddle.net/derfekse/

Answer 2

该组件有两个属性可以报告选择的startDate和endDate。您需要在生成更改事件后读取这些属性。要访问这些属性，请使用以下语法：

var drp = $（'＃daterange'）。data（'daterangepicker'）。xxxxxx;

其中xxxx是要调用的方法（它可能是一个方法或属性）

日期范围选取器文档：

http://www.daterangepicker.com/#options

$('input[name="daterange"]').daterangepicker(); 


    $('#dateRangePicker').on('change', function() 
    { 
     $('#selectedDatePickerField').val($('#dateRangePicker').data('daterangepicker').startDate); 
     $('#selectedDatePickerField2').val($('#dateRangePicker').data('daterangepicker').endDate); 
    }); 

    $('#dateRangePicker').on('daterangepicker', function (e, ui) 
    { 
     $('#selectedDatePickerField').val(ui.item.value); 
     $('#selectedDatePickerField2').val(ui.item.value); 
    }); 

，如果你想设置开始日期初始化后可以使用：

//change the selected date range of that picker 
$('#daterange').data('daterangepicker').setStartDate('03/01/2014'); 
$('#daterange').data('daterangepicker').setEndDate('03/31/2014'); 

最后一把小提琴，说明如何一切都在一起：

https://jsfiddle.net/HappyiPhone/oj8yhnLo/1/

希望它能帮助！

Answer 3

做到这一点使用daterangepickerONSELECT功能的最佳方式。请按照下面的代码::

HTML

<input id="dateRangePicker" type="text" name="daterange" value="" /><br /> 
<input id="selectedDatePickerField" /><br /> 
<input id="selectedDatePickerField2" /> 

jQuery的

$(document).ready(function (e) { 
    $('#dateRangePicker').daterangepicker({}, function(start, end, label) { 
     $('#selectedDatePickerField').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY')); 
     $('#selectedDatePickerField2').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY')); 
}); 
});