日期选取器，使用参数

datepicker, using parameters

本文关键字：参数 选取 日期      更新时间：2023-09-26

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

现在我的问题是日、月和年输入的 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"函数。如何调用函数并在单击日期时返回值？

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

<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;
}

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

您可以使用 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选择器将找到ID以该文本开头的所有HTML元素，因此确保只有一个ID以"日"，"月"和"年"开头的元素非常重要，否则您可能会得到意外的结果。

参考：jQuery从选择器开始

相关文章：