在日期选择器中禁用选定日期的日期

Posted 2023-03-14

【中文标题】在日期选择器中禁用选定日期的日期

【英文标题】：Disable date for selected days in datepicker

【发布时间】：2020-08-25 06:38:08

【问题描述】：

我的 Laravel 应用程序中有一个在线预约表格，其中一些已提交 Select Doctor 和 datepicker。

假设医生A 将在周六、周一和周三在诊所提供服务。周日、周二、周四有医生B。因此，当任何患者从Select Doctor 字段中选择医生A 时，所有周六、周一和周三的日期都将在datepicker 日历中激活，而其他日期将被停用。

我已经停用了datepicker 日历的一些选定日期。但无法禁用 datepicker 中选定日期的日期。

html

<input class="form-control" id="appointment_datepicker" name="appointment_datepicker" type="text" placeholder="Select Date" value=" $user->appointment_datepicker or old('appointment_datepicker') ">

ajax

    $.ajax(

      url:" url('/filter_available_date') ",
      type: 'GET',
      data: _token :token, branch_id_appointment : branch_id_appointment, doctor_id_appointment : doctor_id_appointment,
      success:function(msg)

        $('#appointment_datepicker').datepicker('option', 'beforeShowDay', function(date)
                var day = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ msg.indexOf(day) == -1 ] //here msg is the Array of selected Dates which are activated in the datepicker calendar
            );                    
    
);

路线

Route::get('/filter_available_date','frontendAppointmentController@filter_available_date');

控制器

public function filter_available_date(Request $request)

    $branch_id = $request->branch_id_appointment;
    $doctor_id = $request->doctor_id_appointment;    
    $query =  DB::table('service_doctors');
    $query->select('doctor_id','inactive_dates_in_this_month');    
    if($branch_id != '0')
        $query->where('branch_id','=', $branch_id);

    if($doctor_id != NULL)
        $query->where('doctor_id','=', $doctor_id);

    $result_time = $query->get();    
    $result = [$result_time[0]->inactive_dates_in_this_month];    
    $final_result= explode(',',$result[0]);    
    return $final_result;

日历

如何解决问题？有人帮忙吗？提前致谢。

【问题讨论】：

是jquery datepicker吗？

@EhsanMahmud...是的

能否提供 API 响应？

@EhsanMahmud....我是 Laravel 的新手。您能告诉我查找 API 响应的过程吗？

【参考方案1】：

乍一看，似乎是日期不匹配的问题。如果您使用下面的示例，您可以看到来自 API 的数据应该是什么样子。

var msg = ["2020-05-11"];
$('#appointment_datepicker').datepicker(
  beforeShowDay: function(date) 
    var day = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [msg.indexOf(day) == -1]
  
);

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<input class="form-control" id="appointment_datepicker" name="appointment_datepicker" type="text" placeholder="Select Date">

【讨论】：

.....我可以成功停用数组中的特定日期....但无法停用特定日期的日期。希望您理解我的问题。我已经用 API 响应更新了我的帖子

那么，患者选择了医生，日历发生了变化，这是你想做的吗？

No !!....从管理面板中，我为每个医生选择了 offDay ......并且患者将在日历中看到所选医生的 offDay 为停用......所以我想要，如何将这些 offDays 转换为 datepicker 日历中的停用日期

嗯，老实说，您的问题并没有真正反映您在帖子中提出的内容。似乎您只是无法禁用日期。这听起来更像是一项任务。您能否指出您发送 offDay 的控制器以及它是如何在 ajax 调用中接收的？

我已经用控制器和路由更新了我的帖子。请看看

【参考方案2】：

这里每天都有固定的数字

Sunday = 0
Monday = 1
Tuesday = 2
Wednesday = 3
Thursday = 4
Friday = 5
Saturday = 6 

所以Array 的天数（ex : var arr = [1, 2, 3];) 从控制器返回，那一天将在datepicker 中处于活动状态。

只需在 Ajax 中更改以下代码

Ajax

var arr = [1, 2, 3] //these are the array of days numbers return from controller

$('#appointment_datepicker').datepicker('option', 'beforeShowDay', function(date)
            var day = date.getDay();
            return [(arr.indexOf(day) != -1)];
    );

所以这里只有Monday、Tuesday 和Wednesday 将在datepicker 日历中处于活动状态。

【讨论】：

现在我明白你想要什么了。您在帖子上写的内容意味着您已经拥有来自数据库表的日期，您实际上想要过滤日期，而不是日期。这就是为什么需要查看 api 响应:)。