如何在多个jQueryUI日期选择器中屏蔽特定日期
How to Blackout Specific Dates Across Multiple jQueryUI Datepickers
我想在一个页面上屏蔽四个不同JQuery日期选择器上的特定日期(例如5-20-2015到5-25-2015)。最简单的方法(轻量级)是什么?
HTML
<label>Date Picker 1</label><input type="text" id="datepicker" name="Datepicker" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 2</label><input type="text" id="datepicker22" name="Datepicker2" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 3</label><input type="text" id="datepicker3" name="Datepicker3" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 4</label><input type="text" id="datepicker4" name="Datepicker4" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
jQuery
<script>
$(function() {
$( "#datepicker" ).datepicker({
minDate:3,
maxDate:180,
dateFormat:"DD, d MM, yy",
changeMonth:true,
showButtonPanel:true
});
});
$(function() {
$( "#datepicker2" ).datepicker({
minDate:3,
maxDate:180,
dateFormat:"DD, d MM, yy",
changeMonth:true,
showButtonPanel:true
});
});
$(function() {
$( "#datepicker3" ).datepicker({
minDate:3,
maxDate:180,
dateFormat:"DD, d MM, yy",
changeMonth:true,
showButtonPanel:true
});
});
$(function() {
$( "#datepicker4" ).datepicker({
minDate:8,
maxDate:180,
dateFormat:"DD, d MM, yy",
changeMonth:true,
showButtonPanel:true
});
});
</script>
此处为原始日期选择器的代码:https://jqueryui.com/datepicker/
下面是一个关于如何使用@charlietfl和@Emm提供的有用注释的示例。小提琴可以在这里找到
但基本上,您保留了HTML标记,然后为javascript做:
var unavailableDates = ["20-5-2015", "21-5-2015", "22-5-2015", "23-5-2015", "24-5-2015", "25-5-2015"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true, "", "Book Now"];
} else {
return [false, "", "Booked Out"];
}
}
$(function () {
$("#datepicker, #datepicker2, #datepicker3, #datepicker4").datepicker({
minDate: 3,
maxDate: 180,
dateFormat: "DD, d MM, yy",
changeMonth: true,
beforeShowDay: unavailable,
showButtonPanel: true
});
});
开始工作了!检查下方的代码
HTML
<label>Date Picker 1</label><input type="text" id="datepicker" name="Datepicker" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 2</label><input type="text" id="datepicker22" name="Datepicker2" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 3</label><input type="text" id="datepicker3" name="Datepicker3" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
<label>Date Picker 4</label><input type="text" id="datepicker4" name="Datepicker4" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">
jQuery
<script>
$(function() {
var array = ["Tuesday, 14 April, 2015","Wednesday, 15 April, 2015","Thursday, 16 April, 2015"]
$( "#datepicker, #datepicker2, #datepicker3, #datepicker4" ).datepicker({
minDate:3,
maxDate:180,
dateFormat:"DD, d MM, yy",
changeMonth:true,
showButtonPanel:true,
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
return [ array.indexOf(string) == -1 ]
}
});
});
</script>
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期