Cannot transfer value from JQuery date range picker to input fields

Question

I'm using a basic JQuery date range picker from this example site: http://www.daterangepicker.com/. I am looking for a way to take the provided output from the date range picker and place them into two inputs fields after the dates have been selected. For now, I just want to prove that I can display each value in the new input fields. In the future, I will parse the string to provide two separate dates, but please ignore this for now.

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

This is what I've tried so far:

Script:

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

How can I move the value from the date range picker to each of the input fields?

why have you added .change() in the code?

Dhaval Chheda
– Dhaval Chheda

2017-04-19 13:34:07 +00:00
Commented Apr 19, 2017 at 13:34 — Dhaval Chheda
– Dhaval Chheda, Commented Apr 19, 2017 at 13:34

selvarajmas · Accepted Answer · 2017-04-19 13:42:14Z

You need to use the on('apply.daterangepicker') to get date pickers startDate and endDate values to input fields.

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

Snippet

//<![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" />

Here is the working jsfiddle:https://jsfiddle.net/derfekse/

Rana Ghosh · Accepted Answer · 2017-04-19 13:48:51Z

2

The best way to do this using daterangepicker onselect function. Please follow below code::

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

answered Apr 19, 2017 at 13:48

Rana Ghosh

4,6745 gold badges25 silver badges40 bronze badges

Comments

ProgrammerV5 · Accepted Answer · 2017-04-19 13:40:29Z

That component has two properties to report the startDate and the endDate selected. You need to read those properties after the change event is generated. To access those properties this is the syntax:

var drp = $('#daterange').data('daterangepicker').xxxxxx;

where xxxx is the method you want to call (it could be a method or a property)

Date Range Picker documentation:

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

if you want to set the start date after initialized you can use:

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

and finally a fiddle that shows how all goes together:

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

Hope it helps!

Collectives™ on Stack Overflow

Cannot transfer value from JQuery date range picker to input fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related