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