twitter-bootstrap - 我正在使用 Bootstrap daterangepicker如何將日期範圍預定義為默認值?

  显示原文与译文双语对照的内容
83 5

使用 Bootstrap daterangepicker ( 文本輸入) 將特定日期範圍設置為默認日期範圍

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

JS:

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

我需要用預定日期填寫這份文件。( 例如: - 2014/11/12 )

Bootstrap 詳細信息

文件名:bootstrap-datepicker.js

repo: https://github.com/eternicode/bootstrap-datepicker/

时间:原作者:0个回答

62 4

我只是嘗試將預定義日期添加到值屬性。我想要的工作。感謝你幫助我。

<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">
原作者:
57 4

可以將預定義日期添加到輸入欄位的值屬性中。

<?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;?>">
原作者:
101 3

這是日期範圍。從datarangepicker站點獲取示例,根據需要更改( 時刻( ) 。( ) 。第一個 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);
原作者:
131 4

在調用datepicker之前設置輸入值。

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

這是我唯一的工作:

$("#trvlreqprd").val("01/01/2019 - 01/20/2019");
$("#trvlreqprd").keyup();
原作者:
134 4

從這裡複製 ,並訪問 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"
});
原作者:
90 2

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);
 }
原作者:
...