我想出来的日期范围选择器显示在图片下面
这是我现在正在做的更新代码和我现在拥有的输出。
$(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>这是我基于代码的输出
我最近的任务是实现一个日期范围选择器，类似于Google Analytics中的一个。经过一段时间的搜索，我发现这个JQueryUI小部件工作得非常好，可以使用JQueryUI的ThemeRoller轻松地设置样式。
除非您正在学习或实践，否则使用现有代码、资产和库几乎总是最佳选择。“不要重新发明轮子”和“站在巨人的肩膀上”这两个短语往往因为这个原因而在教室和演讲厅里被反复使用！
请看下面的例子，我修改了你的代码。。
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});.wrapper{
display : inline;
border:1px solid lightgray;
padding:4px;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)
}
input {
border:0;
}
label {
color : gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
Period :
<div class='wrapper'>
<label for="from">from:</label>
<input type="text" id="from" name="from">
<label for="to">to:</label>
<input type="text" id="to" name="to">
</div>
下面是一个关于如何设置其样式的示例，它创建了一个包装#picker元素，该元素获取阴影和边框，然后删除孩子的边框，并将其对齐。
http://jsfiddle.net/truxwruj/
.picker > * {
display:inline;
border:0;
}
.picker {
border:1px solid lightgray;
padding:4px;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)
}
