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