在運行 Booster 主題的 Shopify 專案中，我們根本沒有使用 jQuery。所以我使用一個簡單的插件在購物車頁面中添加日期選擇器。使用下面的代碼，我只能讓日期選擇器作業，但我不確定如何禁用周末、所有節假日和星期一？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dtsel.css" />
<script src="dtsel.js"></script>
</head>
<body>
<input name="dateTimePicker" />
</body>
<script>
instance = new dtsel.DTS('input[name="dateTimePicker"]');
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
showTime: true
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
showTime: true,
showDate: false
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
dateFormat: "yyyy-mm-dd",
timeFormat: "HH:MM:SS"
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
direction: 'BOTTOM'
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
defaultView: "MONTHS"
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
paddingX: 5,
paddingY: 5
});
</script>
</html>
插件站點和 github 存盤庫的鏈接如下。 https://www.cssscript.com/date-time-picker-dtsel/ https://github.com/crossxcell99/dtsel
您能否幫助讓上面的 JavaScript 代碼與下面的 jQuery 代碼完全一樣？
<script>
jQuery(document).ready( function() {
jQuery(function() {
var disabledDays = ["2021-12-23","2021-12-24","2021-12-30","2021-12-25", "2021-12-31", "2021-1-1"];
var myDate = new Date();
if (myDate.getDay() == 5) {
// If today is Friday, disallow the Monday of the coming week (3 days later)
myDate.setDate(myDate.getDate() 3);
disabledDays.push(jQuery.datepicker.formatDate('yy-m-d', myDate));
}
jQuery("#ship_date").datepicker({
minDate: 2,
maxDate: ' 2M',
beforeShowDay: function(date) {
var day = date.getDay();
var string = jQuery.datepicker.formatDate('yy-m-d', date);
var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 and day != 6 disable weekends
return [day != 0 && day != 6 && !isDisabled];
}
});
});
});
</script>
uj5u.com熱心網友回復：
你可以看看VanillaJS DatePicker。它具有您所需的所有選項，并且完全用 JavaScript 撰寫，沒有外部依賴項。在下面的代碼中，您可以看到您在問題中陳述的條件的最小示例。
daysOfWeekDisabled - 0 和 6 禁用星期日和星期六
datesDisabled - 如果今天是星期五，則禁用日期，包括下周一
minDate - 可以選擇的最小日期是 2 天
maxDate - 可以選擇的最大日期為 60 天
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() days);
return result;
}
const DISABLED_DATES = ['03/11/2022'];
const today = new Date();
if(today.getDay() === 5){
DISABLED_DATES.push(addDays(today, 3));
}
const elem = document.querySelector('#foo');
const datepicker = new Datepicker(elem, {
pickLevel: 0,
daysOfWeekDisabled: [0,6],
datesDisabled: DISABLED_DATES,
minDate: addDays(today, 2),
maxDate: addDays(today, 60)
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker.min.js"></script>
<div id="foo"></div>添加天數代碼來自這里。
我故意增加了 60 天而不是 2 個月。您需要修復此問題以獲得準確的 maxDate。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441192.html
標籤：javascript jQuery 约会时间 购物