如何防止单击日期并在引导日期选择器中显示警报消息？

Posted 2023-05-08

【中文标题】如何防止单击日期并在引导日期选择器中显示警报消息？

【英文标题】：How to prevent clicking on dates and display alert message in bootstrap datepicker?

【发布时间】：2020-06-24 03:36:50

【问题描述】：

所以我的代码如下：

var date = new Date();
var active_dates = [<?php 
                $i=0;   
                for($i=0;$i<=count($booked_dates);$i++) 
                    echo "'".$booked_dates[$i]."',";
                
            ?>];
    date.setDate(date.getDate()+1);
    $('#single_datepicker_1').datepicker(
        rtl: KTUtil.isRTL(),
        todayHighlight: true,
        templates: arrows,
        startDate: date, //disable all old dates
        setDate: date, //tomorrow's date allowed
        multidate: true,
        format: 'dd/mm/yyyy',

         beforeShowDay: function(date)
                 var d = date;
                 var curr_date = d.getDate();
                 var curr_month = d.getMonth() + 1; //Months are zero based
                 var curr_year = d.getFullYear();
                 var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

                 if ($.inArray(formattedDate, active_dates) != -1)
                   return 
                      classes: 'bookedDates'
                   ;
                 
              return;
          
        //maxDate: '28/12/2019'

    );

现在阻止预订日期可点击并显示警报消息的代码：

    $('.bookedDates').click(function(event) 
    console.log('Preventing');
    event.preventDefault();
    event.stopPropagation();

    alert("fdf");
);

现在，根据上面的代码，我的日期选择器如下所示：

但是，问题是当我转到下个月时，例如四月，然后警报消息没有显示，原因是四月月份最初没有加载到 datepicker 上。由于当前月份是三月。

因此，如果您单击任何低于日期的警报消息，将不会显示：

任何人都可以告诉我我应该做什么，以便在我单击四月日期时显示警报消息。 谢谢：）

【问题讨论】：

您需要将未来的日期设为灰色吗？

不，我更关注显示警报消息框

【参考方案1】：

该库提供了一种禁用某些日期的方法。只需将此作为选项的一部分传递即可。

datesDisabled: [date_sttings],

或者您可以传递单个日期字符串。请注意，日期字符串必须遵循您已经定义的日期格式。

或者，您可以设置一组禁用日期。当用户选择日期时。您首先检查它是否在禁用日期数组中。如果是，则显示警报并根据需要执行其他操作。

【讨论】：

很抱歉延迟回复，因为正在尝试其他解决方案。好吧，我会试试你的解决方案之一“检查禁用日期数组中的选定日期”。我不是 100% 寻找这项检查，因为我也可以这样做，但无论如何感谢您的回答。会调查的。