在 CSS 创建的图像上使用 DatePickers JQuery 方法来填充输入字段

Question

我所做的是创建了一个纯 CSS 制作的日历图像。现在，当用户单击我的日历时，我希望 datepicker 弹出并允许用户选择他们的日期。选择日期后，应将日期、月份和年份值填充到三个不同的输入字段中。

我查看了许多有关 Stack Overflow 以及其他在线资产的问题，但找不到解决方法。我读过的一些人说默认情况下它绑定到输入标签。

我目前的实现是这样的。

$(function() {
  $("#myDdate").datepicker({
      onClose: function(dateText, inst) {
          $('#year').val(dateText.split('/')[2]);
          $('#month').val(dateText.split('/')[0]);
          $('#day').val(dateText.split('/')[1]);
      }
  });
});

传奇：

.mydate = 创建的 css 日历图像
#day= 当天日历 css 图像下方的输入字段
#month = 月份日历 css 图像下方的输入字段
#year = 年份日历 css 下方的输入字段

具有CSS 的 HTML 看起来像日历：

<div id=".myDate" class="icon">
   <em class="dayName"></em>
   <strong class="month"></strong>
   <span class="dayNumber"></span>
</div>

我创建了两个这样的日历。一个用于开始日期和结束日期。我知道一定有办法做到这一点，但是我找不到办法。

Answer 1

这样的事情应该可以工作：

$("#myDate").datepicker({
    dateFormat: "mm/dd/yy",
    onSelect: function(dateText, instance) {
        date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);

        $('#year').val(date.getFullYear());
        $('#month').val(date.getMonth());
        $('#day').val(date.getDate());
    }
});

说明：
parseDate() 是 DatePicker 的“实用函数”。
它根据 datePicker 值创建一个日期对象。
参数是parseDate(format, value, options)。 Reference.

然后，在这个日期对象上，可以使用 JavaScript Date 方法对其进行操作或提取部分。 Reference.

-----
编辑
删除元素id中的点，如下所示：

<div id="myDate" class="icon">
   <em class="dayName"></em>
   <strong class="month"></strong>
   <span class="dayNumber"></span>
</div>

在 jQuery 中，选择器前面的点表示class。
要定位id，它是#。

注意我刚刚对 jQuery 选择器所做的修改。

-----
第二次编辑

«日期选择器绑定到标准表单输入字段。» Reference.

你把它绑定到div...这就是它失败的原因。
因此，如果您不想看到输入字段...这是一种 hack：

<div id="myDate" class="icon">
   <em class="dayName"></em>
   <strong class="month"></strong>
   <span class="dayNumber"></span>
</div>
<input type="text" id="hiddenDatePicker" style="display:none;">

脚本：

$("#myDate").on("click",function(){
    $("#hiddenDatePicker").css("display","inline");
    $("#hiddenDatePicker").focus();
});

$("#hiddenDatePicker").datepicker({
    dateFormat: "mm/dd/yy",
    onSelect: function(dateText, instance) {
        date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);

        $('#year').val(date.getFullYear());
        $('#month').val(date.getMonth());
        $('#day').val(date.getDate());
    },
    onClose: function(){
        $("#hiddenDatePicker").css("display","none");
    }
});