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

您可以使用jQuery starts-with选择器语法来查找ID。

$('id^=day').val($('id^=day').val()+selectedDay);
$('id^=month').val($('id^=month').val()+selectedMonth);
$('id^=year').val($('id^=year').val()+selectedYear);

提醒一下，starts-with选择器会找到所有 HTML元素，其ID以该文本开头，因此确保只有一个元素的ID以'day'开头很重要'，'月'和'年'否则你可能会得到意想不到的结果。

Reference: jQuery starts with selector

Answer 2

这有点冗长，但在这种情况下你可以使用类。我添加了一个包装器，以便更容易使用：

<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隐藏datepicker的输入：

.hidden {
  display: none;
}

编辑：添加小提琴：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);
    }
  });
});

datepicker，使用参数

2 个答案: