無法將值從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

您需要使用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 = $（'＃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/

希望能幫助到你！