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


 }



...