我希望能够设计一个日期选择器,如下图所示: 理想效果
以下是我现在正在进行的更新代码和输出结果。
$(function() {
$("#fromperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#toperiod").datepicker("option", "minDate", selectedDate);
}
});
$("#toperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#fromperiod").datepicker("option", "maxDate", selectedDate);
}
});
});
.picker {
display: inline;
border: 1px solid lightgray;
padding : 4px;
}
input {
border: 0;
}
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
<tbody>
<tr>
<td>Period</td>
</tr>
<tr>
<td>
<div class='picker'>
<label for="fromperiod">From</label>
<input type="text" id="fromperiod" name="from">
<label for="toperiod">to</label>
<input type="text" id="toperiod" name="to">
</div>
</td>
</tr>
</tbody>
</table>
这是基于代码的输出结果。 点击此处 查看输出结果。