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使用任何格式函数：moment js format options

我建议您仔细阅读daterangepicker options，以便了解每个选项的作用。

然后将其发送给请求或其他任何内容：

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

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

3 个答案: