Datepicker - 仅分开 YY 和 MM答案

【问题标题】：Datepicker - separate YY and MM onlyDatepicker - 仅分开 YY 和 MM
【发布时间】：2016-11-24 15:29:17
【问题描述】：

我正在尝试为 YY 和 MM 设置两个单独的字段我现在拥有的或多或少是我想要的，除了它只是一个领域。这是它现在的样子：how it's looking right now

 <input id="residenceyears" name="residenceyears" type="text"    placeholder="YY/MM" class="input yyMM numeric-only">

这是JS函数：

<script type="text/javascript">
$('.yyMM').datepicker({
 changeMonth: true,
 changeYear: true,
 monthNames: ["1","2","3","4","5","6","7","8","9","10","11","12"],
 yearRange: "-100:+0", 
 dateFormat: 'yy/mm',

 onClose: function() {
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
 },

 beforeShow: function() {
   if ((selDate = $(this).val()).length > 0) 
   {
      iYear = selDate.substring(selDate.length - 4, selDate.length);
      iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
      $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   }
}

});

我想要实现的是：it should look like this

【问题讨论】：

标签： javascript jquery html datepicker

【解决方案1】：

看看这个 jsFiddle -> https://jsfiddle.net/mLcpwdra/

代码：

html

<div id="datepicker"></div>
<hr />
<div id="month"><p>Month:<span></span></p></div>
<div id="year"><p>Year:<span></span></p></div>
<div id="day"><p>Day:<span></span></p></div>

var obj = {
    init: function()
  {
    $('#datepicker').datepicker({
        onSelect : function(date_string,instance)
      {
        var date_obj = new Date(date_string);
        $('#month span').text(String("00"+date_obj.getMonth()).slice(-2));
        $('#year span').text(date_obj.getFullYear());
        $('#day span').text(String("00"+date_obj.getDate()).slice(-2));
      }
    });
  }
};

$(document).ready(function(){
    obj.init();
});

这是一个起点，但认为符合您的需求。希望这会有所帮助

更新：在 YY“格式”中摆弄年份 -> https://jsfiddle.net/mLcpwdra/1/

【讨论】：

这对用户不友好。用户必须手动单击箭头以获取他们想要的年份，而不是选择它。
我指出这是一个起点。您可以自己使用日期选择器选项进行微调。我认为我的小提琴向您展示了如何将日期字符串管理为对象并将该数据正确设置为 dom 元素。

【解决方案2】：

这可能是满足您要求的方法之一，但不能完全解决。

这里是 HTML：

<select class="form-control" id="yearMonthInput"></select>

这里是javascript：

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for (i = new Date().getFullYear() ; i > 2008; i--) {
        $.each(months, function (index, value) {
            $('#yearMonthInput').append($('<option />').val(index + "_" + i).html(i + " " + value));
        });                
    }

试一试！虽然它不是您正在寻找的。p>

【讨论】：