daterangepicker是一个用于选择日期范围的JavaScript库。它提供了一个用户友好的界面,允许用户选择起始日期和结束日期。
要获取daterangepicker选择的日期值,并在输入文本上显示日期,可以按照以下步骤进行操作:
<input type="text" id="dateRangePickerInput" />
$(function() {
$('#dateRangePickerInput').daterangepicker({
startDate: moment().subtract(1, 'day'), // 设置初始日期为前一天
endDate: moment(), // 设置结束日期为当前日期
ranges: {
'Today': [moment(), moment()],
'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')]
}
});
});
在这个例子中,我们设置了一些预定义的日期范围选项,如"Today"、"Yesterday"、"Last 7 Days"等。
$(function() {
$('#dateRangePickerInput').daterangepicker({
// ...其他选项
}, function(start, end, label) {
console.log('选择的日期范围是: ' + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD'));
});
});
在这个例子中,当用户选择日期范围后,回调函数会被触发,并将选择的起始日期、结束日期和标签作为参数传递给回调函数。你可以在回调函数中根据需要进行处理,比如将选择的日期值显示在输入文本框上。
这是一个基本的使用示例,你可以根据自己的需求进行定制和扩展。关于daterangepicker的更多详细信息和选项,请参考腾讯云的相关产品文档:daterangepicker产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云