在 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 年份

Html CSS 看起来像日历：

<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 的 "utility function".
它从 datePicker 值创建一个日期对象。
参数为 parseDate(format, value, options)。 Reference.

然后，在这个日期对象上，JavaScript可以使用日期方法对其进行操作或提取部分。 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...这就是它失败的原因。
因此，如果您不想看到输入字段...这是一种技巧：

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

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

Use the DatePickers JQuery method on a CSS created image to populate input fields

javascript

jquery

datepicker

jquery-ui-datepicker