【问题标题】:Swap month/year select list placement in jQuery UI Datepicker在 jQuery UI Datepicker 中交换月/年选择列表位置
【发布时间】:2016-08-24 14:09:21
【问题描述】:

我想在启用了 changeYear 和 changeMonth 选项的日期选择器中交换月/年选择元素的位置。

默认出现的顺序是月后年,我想要年后月。

运行下面的代码sn-p看看原因:

$( "#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>

【问题讨论】:

标签: javascript jquery jquery-ui jquery-ui-datepicker


【解决方案1】:

只需使用 CSS 将月份和年份向右浮动:

.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { float: right; }

或者作为重复答案提供:使用optionshowMonthAfterYear: true

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-10
    • 1970-01-01
    • 2017-05-11
    相关资源
    最近更新 更多