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

您需要使用 on（'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

使用daterangepicker onselect功能执行此操作的最佳方法。请遵循以下代码::

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

Answer 3

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

var drp = $（＆＃39; #daterange＆＃39;）。data（＆＃39; daterangepicker＆＃39;）。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/

希望它有所帮助！

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

3 个答案: