javascript - 在直接单击时突出显示 jquery ui datepicker 日历上的多个日期可以正常工作,但在由外部按钮触发时则不行
问题描述
我正在使用以下内容创建一个可以选择多天的日历。它根据选择的日期使用值设置为 1/0 true/false 的对象存储“打开”的日期。
然后我有一个功能,可以为打开的每一天添加一个“选定”类。当我手动单击日期时,它可以完美地工作,但是我创建了按钮来选择特定的日期(或以后的日期范围,如果我能做到这一点),但由于某种原因,突出显示日期的代码仅在直接单击时才有效,而不是何时使用按钮。
真正的雀斑是怎么回事?
<div id="days_cal_area">
<div id="days_cal"></div>
<div id="last_day" >Last</div>
</div>
<script>
// Maintain array of dates
var days = {};
$('#days_cal').datepicker({
inline: true,
firstDay: 0,
showOtherMonths: false,
selectOtherMonths: false,
dateFormat: 'yy-mm-dd',
changeYear: false,
defaultDate: new Date(1995, 0, 1),
onSelect: function (dateText, inst) {
day = parseInt(dateText.split('-')[2])
days[day] = !days[day];
daysStr();
},
beforeShowDay: function (date) {
var day = date.getDate();
if (days[day])
return [true, " date_selected day_"+day];
return [true, "day_"+day];
}
});
</script>
<div class="button_area row_items days_buttons">
<div class="sm_button" select="1" type="day">The 1st</div>
<div class="sm_button" select="15" type="day">The 15th</div>
<div class="sm_button" id='last_button'>Last day</div>
</div>
<div class="hidden_field">
<?php $task_form->write_fields(['days','weekdays','weeks','months']); ?>
</div>
<script>
function daysStr(){
console.log(days);
// Clear selected days
$('#days_cal .date_selected').removeClass('date_selected');
// Build a string for the form
temp = [];
$.each(days,function(day,addIt){
if (addIt) {
// Add it to the string for form submission
temp.push(day);
// Also mark it on the calendar
$('[data-day='+day+']').addClass('date_selected');
}
})
// Now add it to the form
$('#days_area [name=days]').val(temp.join(','));
}
$(document).ready(function(){
// prep the calendar (ONE TIMEM THINGS)
$('#days_area a').each(function(){
theTD = $(this).closest('td');
day = $(this).text();
$(theTD).data('day',day);
})
$('#days_area [type=day]').click(function(){
tempDays = $(this).attr('select').split(','); // Comma list of days
$(tempDays).each(function(index,day){
days[day] = true;
})
daysStr();
})
$('#last_button').click(function(){
$(this).toggleClass('on');
if ($(this).hasClass('on')){
$('#last_day').show();
days['last'] = true;
}
else {
$('#last_day').hide();
days['last'] = false;
}
daysStr();
})
})
</script>
解决方案
推荐阅读
- variables - 关于“set”的命名建议
- css - 为什么带有内容的 ::before 伪元素在“display:flex”容器中只去除了前导空格?
- android - isHardwareAccelerated() 总是返回 false
- android - 应用程序崩溃一次替换 Fragment for scoped ViewModel
- scala - databricks scala 在 if 循环之外调用变量
- angular - 更新可观察结果
- sapui5 - “未捕获的 TypeError:sap.ui.require.toUrl 不是函数”
- php - 如何将图像上传到其他服务器
- android - 错误:无法访问 zzbgl。找不到 com.google.android.gms.internal.zzbgl 的类文件
- c# - 无法将文件从 Angular 8 上传到 Asp.net Core 2.2