jQuery 日期选择器 - 阻止未来的日期范围

Question

我在 Shopify 商店上有 jQuery 日期选择器，并且在尝试阻止即将到来的日期范围（从 24/12/2021 到 04/01/202 DD MM YY）时遇到了一些问题，我们将不会在这些日子营业。

任何建议将不胜感激，这是我们目前使用的脚本。

 <script> $(document).ready( function() { $(function() { $("#date").datepicker( { firstDay: 1, minDate: +0, maxDate: '+2M', dateFormat: 'DD d MM yy', beforeShowDay: $.datepicker.noWeekends, beforeShow: function(){ var dateTime = new Date(); var hour = dateTime.getHours(); if(hour>=10){ $(this).datepicker( "option", "minDate", "+1" ); } } } ); }); $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() { if ($('#date').val() == "" || $('#date').val() === undefined) { alert("You must pick a delivery date"); return false; } else { //$(this).submit(); return true; } }); }); </script>

Answer 1

您需要使用 beforeShowDay 并检查您需要显示的日期。

 $(document).ready( function() { $(function() { $("#date").datepicker( { firstDay: 1, minDate: +0, maxDate: '+2M', dateFormat: 'DD d MM yy', beforeShowDay: function(date){ var val = new Date("2021-12-24") >= date || new Date("2022-01-04 ") < date; return [ val ] }, beforeShow: function(){ var dateTime = new Date(); var hour = dateTime.getHours(); if(hour>=10){ $(this).datepicker( "option", "minDate", "+1" ); } } } ); }); $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() { if ($('#date').val() == "" || $('#date').val() === undefined) { alert("You must pick a delivery date"); return false; } else { //$(this).submit(); return true; } }); });

 <link rel="stylesheet" href="https:////code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <input type="text" id="date">