我有一段代码在Shopify网站上使用。基本上有3个交付选项,其中一个是周六交付,如果选择了这个无线电,它将禁用星期六以外的所有日子。
<div class="delivery-radio">
<h3>1. Choose your delivery type:</h3>
<input type="radio" name="attributes[delivery-type]" value="Standard" checked> Standard - Delivery by 6pm (£4.95)<br>
<input type="radio" name="attributes[delivery-type]" value="Pre 12" id="pre_12"> Express - Delivery by 12pm (£6.25)<br>
<input type="radio" name="attributes[delivery-type]" value="saturday" id="saturday"> Saturday - Delivery by 6pm (£6.95)
</div>
<div style="width:300px; clear:both;">
<h3>2. Pick a delivery date:</h3>
<p>
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required readonly="readonly" /> <span id="calendar_click" class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</p>
</div>
我需要的是一个不会破坏我当前禁用英国银行假期的代码的功能。我已经看到这可以通过添加日期并禁用它们来手动完成,但我尝试过的所有内容都不起作用或中断我当前的代码。
以下是我的代码片段,如果有任何jquery / javascript专家可以提供帮助,我将不会感激,因为我在这方面不太先进。
jQuery(function() {
$('input[name="attributes[delivery-type]"]').on('click', function(){
$("#date").datepicker("destroy");
if($(this).val() == "saturday") {
$("#date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: +1,
maxDate: '+2M',
beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}
});
} else {
$("#date").datepicker(
{
dateFormat: 'dd-mm-yy',
minDate: +1,
maxDate: '+2M',
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0 && day != 1), ''];
}
});
}
});
$("#date").datepicker(
{
dateFormat: 'dd-mm-yy',
minDate: +1,
maxDate: '+2M',
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0 && day != 1), ''];
}
});
});
答案 0 :(得分:0)
默认情况下,我通过保持daysOfWeekDisabled:[0,6]来禁用星期六和星期日分娩,并且对于星期六分娩选项,我保持它像 - daysOfWeekDisabled:[0,1,2,3,4,5]。银行假期列表位于datesDisabled。另请注意,maxDate是startDate和endDate。
<div class="delivery-radio">
<h3>1. Choose your delivery type:</h3>
<input type="radio" name="attributes[delivery-type]" value="Standard" checked> Standard - Delivery by 6pm (£4.95)<br>
<input type="radio" name="attributes[delivery-type]" value="Pre 12" id="pre_12"> Express - Delivery by 12pm (£6.25)<br>
<input type="radio" name="attributes[delivery-type]" value="saturday" id="saturday"> Saturday - Delivery by 6pm (£6.95)
</div>
<div style="width:300px; clear:both;">
<h3>2. Pick a delivery date:</h3>
<p>
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required readonly="readonly" /> <span id="calendar_click" class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</p>
</div>
<script>
$(document).ready(function(){
var maxDate = getAdjustedDate(+60);
var minDate = getAdjustedDate(+1);
var tempDt = new Date();
console.log("today: "+tempDt.getDate());
console.log("minDate: "+minDate);
console.log("maxDate: "+maxDate);
$('input[name="attributes[delivery-type]"]').on('click', function(){
$("#date").datepicker("destroy");
if($(this).val() === "saturday") {
$("#date").datepicker({
format: 'dd/mm/yyyy',
startDate: minDate,
endDate: maxDate,
daysOfWeekDisabled: [0,1,2,3,4,5],
datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
});
} else {
$("#date").datepicker(
{
format: 'dd/mm/yyyy',
startDate: minDate,
endDate: maxDate,
daysOfWeekDisabled: [0,6],
datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
});
}
});
$("#date").datepicker(
{
format: 'dd/mm/yyyy',
startDate: minDate,
endDate: maxDate,
daysOfWeekDisabled: [0,6],
datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
});
});
var getAdjustedDate = function (adjustment) {
var today = new Date();
today.setDate(today.getDate() + adjustment);
var dd = today.getDate()-1;
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
};
if(mm<10){
mm='0'+mm;
};
return dd+'/'+mm+'/'+yyyy;
};
</script>
答案 1 :(得分:0)
datesDisabled
似乎是bootstrap datepicker的功能。
您可以在beforeShowDay
函数中添加一个检查,我会将其与不同的部分分开,并根据需要使用变量。
翻译星期六送货
beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}
要
beforeShowDay: saturdayOnly
和你的默认
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0 && day != 1), ''];
}
要
beforeShowDay: notSunMon
然后添加这两个选项的处理:
```
function saturdayOnly (date) {
return dayStatus (date, array(0,1,2,3,4,5));
}
function notSunMon (date) {
return dayStatus (date, array(0,1));
}
var disabledDates = ["22-03-2018", "29-03-2018", "03-04-2018"];
function dayStatus (date, disableDays) {
//Sat = 6, Sun = 0
var dayNumber = date.getDay();
if (disableDays.indexOf(dayNumber) !== -1) {
return [false, ' disabledDay'];
}
var compareDate = formatDate(date);
if (disabledDates.indexOf(compareDate) !== -1) {
return [false, ' disabledDate'];
}
return [true, ' availableDay'];
}
function formatDate(date) {
var dd = date.getDate().toString();
var mm = (date.getMonth() + 1).toString(); // getMonth() is zero-based
var yyyy = date.getFullYear().toString();
//format as dd-mm-yyyy - make sure Disabled Dates match this format
return (dd[1] ? dd : "0" + dd[0]) + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + yyyy;
}
```
这使用一个函数来格式化你的日期,以确保它们都是正确的,并添加了css类。有关如何实现这些内容,请参阅jsfiddle。
只需注意,days !=0 && day != 1
检查“不是星期日/星期一”
尝试使用jsfiddle:https://jsfiddle.net/vreemt/sbrtyvoz/