twitter-bootstrap 我正在使用 bootstrap daterangepicker 如何将日期范围预定义为默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27032605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I'm using bootstrap daterangepicker how to predefine date range as default?
提问by Syed Nizamudeen
Help me to set Specific Date Range as Default by Using bootstrap daterangepicker(Text Input)
帮助我使用 bootstrap daterangepicker（文本输入）将特定日期范围设置为默认值
<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" placeholder="Click here to Choose Date">
JS:
JS：
$('#trvlreqprd').daterangepicker();
I need the text filed to be filled with predefined date. (For Example: 2014/11/05 - 2014/11/12)
我需要用预定义日期填充提交的文本。（例如：2014/11/05 - 2014/11/12）
Bootstrap Detail
引导程序细节
filename: bootstrap-datepicker.js
文件名：bootstrap-datepicker.js
采纳答案by Syed Nizamudeen
I just tried adding predefined dates to value attribute. Its working as i wanted. Thanks Guys for Helping me.
我只是尝试向 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">
回答by Jay Kareliya
You can add predefined date into value attribute of input field. Like
您可以将预定义日期添加到输入字段的值属性中。喜欢
<?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;?>">
回答by user3427013
set input values prior to calling datepicker.
在调用 datepicker 之前设置输入值。
$(function () {
$("#inputDatepicker_start").val("01/05/2014");
$("#inputDatepicker_end").val("26/05/2014");
$("#datepicker").datepicker({ format: "dd/mm/yyyy" });
});
回答by Victor
This is the only thing that worked for me:
这是唯一对我有用的东西：
$("#trvlreqprd").val("01/01/2019 - 01/20/2019");
$("#trvlreqprd").keyup();
回答by rkmorgan
this is for date range... Get the example from datarangepicker's web site and changed the cb(moment(), moment()) based on your need. First moment() will give the start date, and the second one will give you the end date. So the following example will start 18 days from today, end today.
这是用于日期范围...从 datarangepicker 的网站获取示例并根据您的需要更改 cb(moment(), 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);
回答by Faruk Omar
copied from hereand visit 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
JS
$('.input-daterange').datepicker({});
input between predefined date range
预定义日期范围之间的输入
$('.input-daterange').datepicker({
startDate: "01/11/2014",
endDate: "10/01/2015"
});
回答by Clive Paterson
HTML Part
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>
<span></span> <b class="caret"></b>
</div>
Javascript
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);
}
