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 ......这就是它失败的原因所以如果你不想看到输入字段......这是一种黑客攻击：

<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方法来填充输入字段

1 个答案: