如何使用日期范围选择器选择日期并将其放入输入中

Question

I am trying to use this addon http://www.daterangepicker.com/ but i can't figure out how retreive the value in an input

In this example it show us how to do it

<input type="text" name="birthdate" value="10/24/1984" />

<script type="text/javascript">
$(function() {
    $('input[name="birthdate"]').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true
    }, 
    function(start, end, label) {
        var years = moment().diff(start, 'years');
        alert("You are " + years + " years old.");
    });
});
</script>

The value selected by user will go to the input birthdate

But in this example (the one that i want to use )

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$(function() {

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    cb(moment().subtract(29, 'days'), moment());

    $('#reportrange').daterangepicker({
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

});
</script>

There is no input

I don't know how to retreive the input !

Answer 1

If I understand correctly, you want to show the selected dates in a label, and save the selection in variable so you can access it. Here is how I did it:

The html:

<p>
  <label for="dateRange">Choose timeframe</label>
</p>
<div id="dateRange" class="btn default">
  <i class="fa fa-calendar"></i> &nbsp;
  <span> </span>
  <b class="fa fa-angle-down"></b>
</div>

And here is the js:

var startDate = moment().subtract('month', 1).startOf('month'),
    endDate = moment().subtract('month', 1).endOf('month');

$('#dateRange').daterangepicker({
                opens: (App.isRTL() ? 'left' : 'right'),
                startDate: startDate,
                endDate: endDate,
                dateLimit: {
                    years: 1
                },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                    'Last 7 Days': [moment().subtract('days', 6), moment()],
                    'Last 30 Days': [moment().subtract('days', 29), moment()],
                    'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                },
                autoApply: true,
                format: 'MM/DD/YYYY',
                separator: ' to ',
                locale: {
                    applyLabel: 'Apply',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom Range',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            },
            function (start, end) {
             // updating the span with current dates
                $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                // Saving the new dates in your startDate and endDate variables.
                startDate = start;
                endDate = end;
            }
    );

//Set the initial state of the picker label
    $('#dateRange span').html(startDate.format('MMMM D, YYYY') + ' - ' + endDate.format('MMMM D, YYYY'));

Where startDate and endDate is moment() objects of my choosing. The picker will look like this:

To retrieve the value:

For example to unix timestamp:

var startUnix = startDate.unix();
var endUnix = endDate.unix();

Or using any format function avalible in moment js: moment js format options

I suggest you read through the daterangepicker options as well so you know what every option does.

And then to send it in a request or anything:

var params = {};
params.start = startUnix;
params.end = endUnix;

$.get('url', params).done(function (data) {
    // callback
});

Answer 2

Could you try adding an input field

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<!-- here or where is necessary -->
<input type="text" name="birthdate" value="10/24/1984" />
    <span></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$(function() {

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    cb(moment().subtract(29, 'days'), moment());

    $('#reportrange').daterangepicker({
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

});
</script>

Answer 3

The date value selected will get populated in the empty <span></span> . For example <span>January 29, 2016 - February 4, 2016</span>

<input id="hdnReportRange" type="hidden"/>

...

$("#reportrange").on("apply.daterangepicker", function(ev, picker) {
    $("#hdnReportRange").val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});