twitter-bootstrap - 我正在使用引导程序 daterangepicker 如何将日期范围预定义为默认值？

Question

帮助我使用引导程序 daterangepicker（文本输入）将特定日期范围设置为默认值

<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" placeholder="Click here to Choose Date">

JS：

$('#trvlreqprd').daterangepicker();

我需要填写预定义日期的文本。（例如：2014/11/05 - 2014/11/12）

引导细节

---

文件名：bootstrap-datepicker.js

回购：https ://github.com/eternicode/bootstrap-datepicker/

Answer 1

我只是尝试将预定义的日期添加到 value 属性。它按我的意愿工作。感谢伙计们帮助我。

<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" value="<?php echo "2014/11/05 - 2014/11/12"; ?>" placeholder="Click here to Choose Date">

Answer 2

您可以将预定义的日期添加到输入字段的值属性中。喜欢

<?php 
  $date_range = "2014/11/05 - 2014/11/12";
?>


<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" placeholder="Click here to Choose Date" value="<?php echo $date_range;?>">

Answer 3

这是日期范围...从 datarangepicker 的网站获取示例，并根据您的需要更改 cb(moment(), moment())。第一个 moment() 会给出开始日期，第二个会给出结束日期。所以下面的例子将从今天开始 18 天，今天结束。

 cb(moment().subtract(18,'days'), moment());

    $('#reportrange').daterangepicker({
            "startDate": moment(),
            "endDate": moment(),
            "autoApply": true,
            "opens": "center",
            "buttonClasses": "btn-info",
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],                   
                'This Month': [moment().startOf('month'), moment().endOf('month')]                   
            }
        }, cb);

Answer 4

这是唯一对我有用的东西：

$("#trvlreqprd").val("01/01/2019 - 01/20/2019");
$("#trvlreqprd").keyup();

Answer 5

在调用 datepicker 之前设置输入值。

$(function () {
$("#inputDatepicker_start").val("01/05/2014");
$("#inputDatepicker_end").val("26/05/2014");
$("#datepicker").datepicker({ format: "dd/mm/yyyy" });
});

Answer 6

从 这里复制 并访问jsfiddle

 <div class="input-daterange" id="datepicker">
        <div class="input-group">
            <input type="text" class="input-small form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-small form-control" name="end" />
        </div>
    </div>

JS

$('.input-daterange').datepicker({});

预定义日期范围之间的输入

$('.input-daterange').datepicker({
    startDate: "01/11/2014",
    endDate: "10/01/2015"
});

Answer 7

HTML 部分

    <div id="report-date-range" 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>

Javascript

    function updateLabel(start, end, label) {
        if (label === 'Custom Range') {
            $("#report-date-range span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        } else {
            $("#report-date-range span").html(label);
        }
    }

    $("#report-date-range").daterangepicker({
        startDate: moment().startOf('day'),
        endDate: moment().endOf('day'),
        opens: "right",
        drops: "down",
        ranges: {
            'Today': [moment().startOf('day'), moment().endOf('day')],
            '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')]
        }
    }, updateLabel);

    // Set the default value
    var datepicker = $("#report-date-range").data('daterangepicker');
    var initialSel = 'This Month';   // Or something else
    if (initialSel && datepicker.ranges && datepicker.ranges[initialSel]) {
        var range = datepicker.ranges[initialSel];
        datepicker.chosenLabel = initialSel;
        datepicker.setStartDate(range[0]);
        datepicker.setEndDate(range[1]);
        updateLabel(datepicker.startDate, datepicker.endDate, datepicker.chosenLabel);
    } else {
        datepicker.chosenLabel = 'Today';
        updateLabel(datepicker.startDate, datepicker.endDate, datepicker.chosenLabel);
    }