当需要在网页中实现日期选择功能时，jQuery插件datepicker提供了很好的支持。对于需要实现连续选择日期的业务场景，我们可以使用datepicker中的range选择方式。下面，我将给出一个完整攻略，并且包含两个示例。
一、准备工作
在使用datepicker插件之前，需要先在HTML文件中引入jQuery库和datepicker插件。可以在jQuery官网下载jQuery库和datepicker插件，也可以使用CDN链接引入：
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引入datepicker插件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
二、实现datepicker连续选择日期
使用datepicker插件的range选择方式，需要在HTML文件中准备两个input元素，一个用于选择开始日期，一个用于选择结束日期。并且通过使用jQuery选择器绑定这两个元素，并调用datepicker插件的options中的range属性，即可实现日期的连续选择。下面是一个简单的示例代码：
<!-- HTML代码 -->
<label>开始日期：</label><input type="text" id="start-date" class="form-control">
<label>结束日期：</label><input type="text" id="end-date" class="form-control">
<!-- JS代码 -->
$(function(){
// 绑定datepicker插件
$('#start-date').datetimepicker({
format: 'YYYY-MM-DD', // 日期格式
locale: 'zh-cn', // 使用中文语言包
allowInputToggle: true // 允许输入框点击后展开日历面板
});
// 绑定datepicker插件，range属性指定选择的是日期段
$('#end-date').datetimepicker({
format: 'YYYY-MM-DD', // 日期格式
locale: 'zh-cn', // 使用中文语言包
allowInputToggle: true, // 允许输入框点击后展开日历面板
useCurrent: false, // 关闭默认选中当天，设为false
range: true, // 启用日期段选择
// 限定选择的日期范围
disabledDates: [
moment().add(3, 'd').format('YYYY-MM-DD'), // 当天后3天禁用
moment().add(7, 'd').format('YYYY-MM-DD') // 当天后7天禁用
],
// 选择开始日期后，限定结束日期在之后的几天内
minDate: moment().add(1, 'd').format('YYYY-MM-DD'), // 开始日期后一天
maxDate: moment().add(30, 'd').format('YYYY-MM-DD') // 开始日期后30天
});
// 选择开始日期后，将开始日期赋值给结束日期的最小日期限制
$('#start-date').on('dp.change', function(ev){
$('#end-date').data('DateTimePicker').minDate(ev.date);
});
// 选择结束日期后，将结束日期赋值给开始日期的最大日期限制
$('#end-date').on('dp.change', function(ev){
$('#start-date').data('DateTimePicker').maxDate(ev.date);
});
});
在上述示例代码中，我们为开始日期和结束日期都绑定了datetimepicker插件，并且指定了日期格式、语言、是否允许手动输入、是否启用日期段选择、日期范围限定等选项。同时，我们还为每个日期选择框绑定了dp.change事件，以实现选择日期后互相交互修改。
三、示例展示
下面给出两个简单的示例，分别演示了如何在一个模态框中展示datepicker的连续日期选择结果，以及在单个页面中通过Ajax请求获取日期段内的订单信息。
示例1：模态框中展示datepicker连续选择日期
在这个示例中，我们使用Bootstrap框架的模态框（Modal）组件，展示了datepicker选择的连续日期范围。用户可以在模态框中连续选择日期，选择完成后点击确定按钮，模态框会关闭，并将选择的日期显示在页面上。
<!-- HTML代码 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">选择日期段</button>
<div id="result"></div>
<!-- 模态框代码 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">选择日期段</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>开始日期：</label><input type="text" id="start-date-modal" class="form-control">
</div>
<div class="col-md-6">
<label>结束日期：</label><input type="text" id="end-date-modal" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btn-ok">确定</button>
</div>
</div>
</div>
</div>
<!-- JS代码 -->
$(function(){
// 模态框显示前清空日期选择框并重置日期范围
$('#myModal').on('show.bs.modal', function(){
$('#start-date-modal').val('');
$('#end-date-modal').val('');
$('#end-date-modal').data('DateTimePicker').minDate(false);
$('#end-date-modal').data('DateTimePicker').maxDate(false);
});
// 点击确认按钮后将选择的日期段展示在页面上
$('#btn-ok').on('click', function(){
var startDate = $('#start-date-modal').val();
var endDate = $('#end-date-modal').val();
if(startDate==='' || endDate===''){
alert('请选择日期段！');
return false;
}
$('#myModal').modal('hide');
$('#result').html('开始日期：'+startDate+'，结束日期：'+endDate);
});
// 为日期选择框绑定datepicker插件及选项
$('#start-date-modal').datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-cn',
allowInputToggle: true
});
$('#end-date-modal').datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-cn',
allowInputToggle: true,
useCurrent: false,
range: true,
disabledDates: [
moment().add(3, 'd').format('YYYY-MM-DD'),
moment().add(7, 'd').format('YYYY-MM-DD')
],
minDate: moment().add(1, 'd').format('YYYY-MM-DD'),
maxDate: moment().add(30, 'd').format('YYYY-MM-DD')
});
// 开始日期变化时限定结束日期的minDate范围
$('#start-date-modal').on('dp.change', function(ev){
$('#end-date-modal').data('DateTimePicker').minDate(ev.date);
});
// 结束日期变化时限定开始日期的maxDate范围
$('#end-date-modal').on('dp.change', function(ev){
$('#start-date-modal').data('DateTimePicker').maxDate(ev.date);
});
});
示例2：通过Ajax请求获取日期段内的订单信息
在这个示例中，我们使用jQuery Ajax技术，根据选择的日期范围来获取订单数据。用户在页面中连续选择日期后，点击查询按钮，页面通过Ajax请求提交参数，后台接收参数、查询数据，最终将查询结果返回给前端页面展示。
<!-- HTML代码 -->
<label>选择日期范围：</label>
<input type="text" id="start-date-ajax" class="form-control">
-
<input type="text" id="end-date-ajax" class="form-control">
<button class="btn btn-primary" id="btn-search">查询订单</button>
<table id="order-table" class="table table-bordered"></table>
<!-- JS代码 -->
$(function(){
// 为日期选择框绑定datepicker插件及选项
$('#start-date-ajax').datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-cn',
allowInputToggle: true
});
$('#end-date-ajax').datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-cn',
allowInputToggle: true,
useCurrent: false,
range: true,
disabledDates: [
moment().add(3, 'd').format('YYYY-MM-DD'),
moment().add(7, 'd').format('YYYY-MM-DD')
],
minDate: moment().add(1, 'd').format('YYYY-MM-DD'),
maxDate: moment().add(30, 'd').format('YYYY-MM-DD')
});
// 查询订单按钮点击事件
$('#btn-search').on('click', function(){
var startDate = $('#start-date-ajax').val();
var endDate = $('#end-date-ajax').val();
if(startDate==='' || endDate===''){
alert('请选择日期范围！');
return false;
}
// 查询订单数据
$.ajax({
type: 'post',
url: 'order.php',
data: {'startDate': startDate, 'endDate': endDate},
dataType: 'json',
success: function(data){
if(data.code === 0){
var orders = data.orders;
var tbodyHTML = '<thead><tr><th>订单号</th><th>客户名称</th><th>总金额</th><th>下单时间</th></tr></thead>';
tbodyHTML += '<tbody>';
for(var i=0; i<orders.length; i++){
var order = orders[i];
tbodyHTML += '<tr>';
tbodyHTML += '<td>'+order.orderNo+'</td>';
tbodyHTML += '<td>'+order.customer+'</td>';
tbodyHTML += '<td>'+order.amount+'</td>';
tbodyHTML += '<td>'+order.createTime+'</td>';
tbodyHTML += '</tr>';
}
tbodyHTML += '</tbody>';
$('#order-table').html(tbodyHTML);
}
else{
alert('查询出错：'+data.msg);
}
},
error: function(){
alert('查询出错：网络错误！');
}
});
});
});
在这个示例代码中，我们首先为日期选择框绑定了datetimepicker插件及选项。然后，我们为查询订单按钮绑定了click事件，在点击按钮时，判断选择的日期范围是否为空，如果不为空则通过jQuery Ajax技术向服务器发送查询数据请求，并将获取到的数据展示在页面上。
以上就是jQuery插件datepicker 日期连续选择的完整攻略，示例演示了如何在模态框中展示日期选择结果，以及如何通过Ajax请求获取日期段内的订单信息。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery插件datepicker 日期连续选择 - Python技术站
微信扫一扫 
支付宝扫一扫 