javascript - 日期选择器，使用参数

Question

我有一个日期输入、一个月份输入和一个年份输入，以及显示的日期选择器。单击图像时，我会在每个输入中输入日、月和年。

现在我的问题是日、月和年输入的 id 会动态变化，我想将它们指定为参数:

        <input name="dayXX" id="dayXX"> 
        <input name="monthXX" id="monthXX"> 
        <input name="yearXX" id="yearXX">  
        <input name="calendario" id="calendario" onclick="$(this).openDatepicker();">
        <input type="hidden" id="datepicker">

       $(function () {
         $("#datepicker").datepicker({
            firstDay: 0,
            monthNames: ['January', 'February', 'March',
            'April', 'May', 'June',
            'July', 'August', 'September',
            'October', 'November', 'December'],
            dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            dateFormat: 'dd-mm-yy',

       });
     });



   jQuery(function($) {

      $.fn.openDatepicker = function() {

         $('#datepicker').datepicker('show');
             var date = $("#datepicker").datepicker().val();
         alert(date);
     };
    });

XX会动态变化。

但是这是异步的，并且不会将值返回给“openDatepicker”函数。如何在点击日期时调用该函数并返回值？

Answer 1

这有点冗长，但在这种情况下您可以使用类。我添加了一个包装器以使其更易于使用:

<div class="pickergroup">
  <input class='dayme' name="day" id="day">
  <input class='monthme' name="month" id="month">
  <input class='yearme' name="year" id="year">
  <input class='calendario'>
  <input class="hidden datepicker">
</div>

从标记中删除了点击处理程序并将其放入代码中:

 $(function() {
   $(".pickergroup").find(".datepicker").datepicker({
     firstDay: 0,
     monthNames: ['January', 'February', 'March',
       'April', 'May', 'June',
       'July', 'August', 'September',
       'October', 'November', 'December'
     ],
     dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
     dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
     dateFormat: 'dd-mm-yy'
   });
   $('.pickergroup').on('click', '.calendario', function() {
     var mycontainer = $(this).parent('.pickergroup');
     var dp = mycontainer.find('.datepicker');
     dp.show().datepicker('show').hide();//work around hidden element x position
     var pdate = dp.datepicker('getDate');
     if (pdate) {
       var day = pdate.getDate();
       var month = pdate.getMonth() + 1;
       var year = pdate.getFullYear();
       mycontainer.find('.dayme').val(day);
       mycontainer.find('.monthme').val(month);
       mycontainer.find('.yearme').val(year);
     }
   });
 });

隐藏日期选择器输入的 CSS:

.hidden {
  display: none;
}

编辑:添加 fiddle :https://jsfiddle.net/MarkSchultheiss/mct4owch/

我添加了 onSelect，以便您可以在选择它时看到它:

$(function() {
  $(".pickergroup").find(".datepicker").datepicker({
    onSelect: function(dateText, dpInst) {
      var mycontainer = $(this).parent('.pickergroup');
      console.log(dateText);
      var pdate = $(this).datepicker("getDate");
      if (pdate) {
        var day = pdate.getDate();
        var month = pdate.getMonth() + 1;
        var year = pdate.getFullYear();
        mycontainer.find('.dayme').val(day);
        mycontainer.find('.monthme').val(month);
        mycontainer.find('.yearme').val(year);
      }
    },
    firstDay: 0,
    monthNames: ['January', 'February', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October', 'November', 'December'
    ],
    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    dateFormat: 'dd-mm-yy'
  });
  $('.pickergroup').on('click', '.calendario', function() {
    var mycontainer = $(this).parent('.pickergroup');
    var dp = mycontainer.find('.datepicker');
    dp.show().datepicker('show').hide(); //work around hidden element x position
    var pdate = dp.datepicker('getDate');
    if (pdate) {
      var day = pdate.getDate();
      var month = pdate.getMonth() + 1;
      var year = pdate.getFullYear();
      mycontainer.find('.dayme').val(day);
      mycontainer.find('.monthme').val(month);
      mycontainer.find('.yearme').val(year);
    }
  });
});