無法將值從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')); 
}); 
});