CODEWITHSUNDEEP
javascriptjquerydaterangepicker
JazLady
JazLady

Reputation: 23

How do I pass the date range selected in the daterangepicker to a variable or back to my input textbox in javascript?

My javascript below using preset ranges for DateRangePicker - I need to pass the selected start and end dates to two variables call StartDate and EndDate or pass it back to my LogiXML input text box. I am not sure how to do this. Please help.

Note: I don't want to run the daterangepicker logic for two different input fields(from and to). I want to use one input field but the start and end dates are passed to two separate variables.

I am using comiseo.daterangepicker please help me.

$(document).ready(function() {
                    $("#inpDatePicker").daterangepicker({
                        presetRanges: [{
                            text: 'Today',
                            dateStart: function() { return moment() },
                            dateEnd: function() { return moment() }
                        }, {
                            text: 'Month to Date',
                            dateStart: function() { return moment().startOf('month')  },
                            dateEnd: function() { return moment() }
                        }, {
                            text: 'Quarter to Date',
                            dateStart: function() { return moment().startOf('quarter') },
                            dateEnd: function() { return moment() }
                        }, {
                            text: 'Year to Date',
                            dateStart: function() { return moment().startOf('Year') },
                            dateEnd: function() { return moment() }
                        }],
                        applyOnMenuSelect: true,
                        datepickerOptions: {
                            minDate: 0,
                            maxDate: null,
                            numberOfMonths : 3,
                            changeMonth: true,
                            changeYear: true

                        }
                    })
                });

Upvotes: 0

Views: 7279

Answers (2)

Christopher Lee
Christopher Lee

Reputation: 36

JQuery Declaration:

$("#inpDatePicker").daterangepicker({...})

Event Trigger (This goes in after an event is fired):

var range = $("#inpDatePicker").daterangepicker("getRange");
$("#range_start").val(range['start']);
$("#range_end").val(range['end']);

HTML:

<input id="inpDatePicker" name="inpDatePicker" type="text">
<input type="hidden" name="range_start" id="range_start">
<input type="hidden" name="range_end" id="range_end">

Upvotes: 1

szupie
szupie

Reputation: 856

$("#inpDatePicker").val() will return an object with start and end. You can listen to your $("#inpDatePicker")'s change event to see when to get the values.

$("#inpDatePicker").daterangepicker({
  onChange: function() {
    StartDate = $("#inpDatePicker").val().start;
    EndDate = $("#inpDatePicker").val().end;
  }
}

Upvotes: 2

Related Questions