如何使用日期范圍選擇器選擇日期並將其放入輸入中

Question

我正在嘗試使用此插件http://www.daterangepicker.com/，但我不知道如何在輸入中獲取值

在這個例子中，它告訴我們如何做

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

用戶選擇的值將轉到輸入的birthdate

但是在此示例中（我要使用的示例）

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

沒有輸入

我不知道如何檢索輸入！

Answer 1

如果我理解正確，則希望在標簽中顯示所選日期，並將所選內容保存在變量中，以便可以訪問它。 這是我的做法：

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

這是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'));

其中startDate和endDate是我選擇的moment（）對象。 選擇器將如下所示：

要獲取值：

例如Unix時間戳：

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

或使用時刻js中可用的任何格式函數： 時刻js格式選項

我建議您也仔細閱讀daterangepicker選項 ，以了解每個選項的作用。

然后以請求或其他方式發送它：

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

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

Answer 2

您可以嘗試添加輸入字段嗎

<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

所選的日期值將填充在空白的<span></span> 。 例如<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'));
});