在 jQuery UI 日期选择器中交换 month/year select 列表位置
Swap month/year select list placement in jQuery UI Datepicker
我想在启用了 changeYear 和 changeMonth 选项的日期选择器中交换 month/year select 元素的位置。
默认的出现顺序是先月后年,我想要先年后月。
运行下面的代码片段可以看出原因:
$( "#picker" ).datepicker({
maxDate: 'today',
changeYear: true,
changeMonth: true,
minDate: "01/01/1939",
stepMonths:12,
yearRange: "1939:" + new Date().getFullYear()
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<form>
<div><b>How do I swap the month/year select list placement?</b></div>
Birthdate: <input type="text" name="picker" id="picker" value="" />
<ol>
<li>Click the input above to open the datepicker.</li>
<li>Click on the month select list to view the select options available.</li>
<li>Notice that it only shows up to the current month? This is confusing to users.</li>
<li>Change the year to any previous one.<li>
<li>Now select a month, they are all there.</li>
<li>In our world of left to right processing, in this case, it makes sense to have the year appear first followed by the month.</li>
</ol>
</form>
只需将月份和年份向右浮动 CSS:
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { float: right; }
或重复答案提供的那样:使用 option showMonthAfterYear: true
我想在启用了 changeYear 和 changeMonth 选项的日期选择器中交换 month/year select 元素的位置。
默认的出现顺序是先月后年,我想要先年后月。
运行下面的代码片段可以看出原因:
$( "#picker" ).datepicker({
maxDate: 'today',
changeYear: true,
changeMonth: true,
minDate: "01/01/1939",
stepMonths:12,
yearRange: "1939:" + new Date().getFullYear()
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<form>
<div><b>How do I swap the month/year select list placement?</b></div>
Birthdate: <input type="text" name="picker" id="picker" value="" />
<ol>
<li>Click the input above to open the datepicker.</li>
<li>Click on the month select list to view the select options available.</li>
<li>Notice that it only shows up to the current month? This is confusing to users.</li>
<li>Change the year to any previous one.<li>
<li>Now select a month, they are all there.</li>
<li>In our world of left to right processing, in this case, it makes sense to have the year appear first followed by the month.</li>
</ol>
</form>
只需将月份和年份向右浮动 CSS:
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { float: right; }
或重复答案提供的那样:使用 option showMonthAfterYear: true