我所做的就是创建了一个完全由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>


我创建了其中两个日历。一个用于开始日期和结束日期。我知道必须有一种方法可以实现这一目标,但是我找不到方法。

最佳答案

这样的事情应该起作用:

$("#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

然后,在该date对象上,可以使用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");
    }
});

关于javascript - 在CSS创建的图像上使用DatePickers JQuery方法填充输入字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38362038/

10-11 22:11
查看更多