您好我刚接触使用javascript并在使用daterangepicker bootstrap时遇到问题。我管理实现了这个我得到的演示,但我仍然坚持从javascript获取开始日期和结束日期的值。
这是javascript
<script type="text/javascript">
$(document).ready(function() {
$('#reportrange').daterangepicker(
{
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'DD/MM/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
});
</script>
这是将要处理onclick方法的按钮
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
'start'和'end'将包含日期的值。如果我希望这些值作为输入,以便以后在我的项目中使用编码,例如保存到数据库中,我该怎么称呼它们?
答案 0 :(得分:57)
$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;
答案 1 :(得分:31)
为您的按钮添加ID
<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>
将startDate和endDate变量添加到脚本
var startDate;
var endDate;
在daterangepicker回调中设置这些变量
startDate = start;
endDate = end;
在$(document).ready
功能
$('#saveBtn').click(function(){
console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});
<script type="text/javascript">
var startDate;
var endDate;
$(document).ready(function() {
$('#reportrange').daterangepicker(
{
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'DD/MM/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
startDate = start;
endDate = end;
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
$('#saveBtn').click(function(){
console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});
});
</script>
答案 2 :(得分:16)
您必须检索数据对象:
var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;
请注意最后的_d
请求以获取实际的javascript日期对象。
此外,如果data
对象永远是undefined
,那么它可能是bootstrap.js
被重新实例化的结果。这发生在我的MVC页面上,我忘了用脚本包围我的脚本:
@region scripts {
}
答案 3 :(得分:15)
var endDate= $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');
或其他格式;
.endDate.format('YYYY-MM-DD');
.endDate.format('D MM YYYY');
.endDate.format('D MMMM YYYY');
答案 4 :(得分:1)
daterangepicker startDate和endDate返回时刻对象,而不是Javascript Date对象。
以下是将矩对象转换为日期对象的方法:
let startDate = moment($('#selector').data('daterangepicker').startDate).toDate();
let endDate = moment($('#selector').data('daterangepicker').endDate).toDate();
答案 5 :(得分:0)
简单,直接输入范围:
$(document).ready(function(){
$('#reportrange span').bind('DOMSubtreeModified', function(e){
alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
});
})
答案 6 :(得分:0)
我知道这一点都不优雅。仍要共享。
首先,我们获得daterangepicker输入框的值:
var date_range = $('#date_range').val();
现在,如果我们配置为显示'-'之间的日期,让我们对其进行分割:
var dates = date_range.split(" - ");
以字符串形式获取日期:
var start = dates[0];
var end = dates[1];
以“ D MMMM YY”格式获取日期作为Moment对象:
var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');