CODEWITHSUNDEEP
javascriptjqueryhtml
Martin Erlic
Martin Erlic

Reputation: 5665

Cannot transfer value from JQuery date range picker to input fields

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?

Upvotes: 0

Views: 1280

Answers (3)

Rana Ghosh
Rana Ghosh

Reputation: 4674

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

Upvotes: 2

selvarajmas
selvarajmas

Reputation: 1643

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/

Upvotes: 2

ProgrammerV5
ProgrammerV5

Reputation: 1962

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!

Upvotes: 1

Related Questions