javascript – Datepicker – 仅分开YY和MM

2019-07-11 08:33:27 阅读：189 来源： 互联网

标签：jquery javascript datepicker html

我想为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

解决方法:

看看这个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/

标签：jquery,javascript,datepicker,html
来源： https://codeday.me/bug/20190711/1430308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Datepicker – 仅分开YY和MM