jQuery写一个日期选择框可以选择开始日期到结束日期

可以使用 jQuery UI 中的日期选择器（datepicker）和日期范围选择器（dateRangePicker）来实现。

1. 引入 jQuery 和 jQuery UI 的库文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. 在 HTML 中添加日期选择框的输入框：

<label for="start-date">开始日期：</label>
<input type="text" id="start-date">
<label for="end-date">结束日期：</label>
<input type="text" id="end-date">

3. 使用 jQuery UI 的日期选择器和日期范围选择器：

$(function() {
    $("#start-date").datepicker({
        dateFormat: "yy-mm-dd", // 日期格式
        onSelect: function(selectedDate) { 
            // 当选择开始日期时，设置结束日期的最小值为开始日期
            $("#end-date").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#end-date").datepicker({
        dateFormat: "yy-mm-dd", // 日期格式
        onSelect: function(selectedDate) { 
            // 当选择结束日期时，设置开始日期的最大值为结束日期
            $("#start-date").datepicker("option", "maxDate", selectedDate);
        }
    });
});

4. 如果需要使用日期范围选择器，可以使用 jQuery UI 的 dateRangePicker 插件，代码如下：

$(function() {
    $("#start-date").dateRangePicker({
        dateFormat: "yy-mm-dd", // 日期格式
        endDateId: "end-date", // 结束日期的输入框 ID
        minDays: 0, // 可选日期范围的最小天数
        onClose: function(selectedDate) { 
            // 当选择开始日期时，设置结束日期的最小值为开始日期
            $("#end-date").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#end-date").dateRangePicker({
        dateFormat: "yy-mm-dd", // 日期格式
        startDateId: "start-date", // 开始日期的输入框 ID
        minDays: 0, // 可选日期范围的最小天数
        onClose: function(selectedDate) { 
            // 当选择结束日期时，设置开始日期的最大值为结束日期
            $("#start-date").datepicker("option", "maxDate", selectedDate);
        }
    });
});

以上代码可以实现一个简单的日期选择框和日期范围选择框，可以根据需求进行修改和扩展。