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/

时间: 原作者:

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


 }



...