Отключить дату для выбранных дней в datepicker - PullRequest
Новая
       119

Отключить дату для выбранных дней в datepicker

1 голос
/ 09 мая 2020

У меня есть онлайн-форма записи в моем Laravel заявлении с некоторыми заполненными Select Doctor и datepicker.

Предположим, врач A будет доступен в клинике c в субботу, понедельник и Среда. А доктор B будет доступен в воскресенье, вторник, четверг. Таким образом, пока любой пациент выбирает врача A из поля Select Doctor, все даты с субботой, понедельником и средой будут активированы в календаре 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;
}

Календарь enter image description here

Как решить проблему? Кто-нибудь, пожалуйста, помогите? Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 09 мая 2020

На первый взгляд кажется проблема несоответствия даты. Если вы воспользуетесь приведенным ниже примером, то увидите, как должны выглядеть данные, поступающие из 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">
0 голосов
/ 10 мая 2020

Здесь Каждый день имеет фиксированный номер, например 

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

Таким образом, Array номер дня ( например: var arr = [1, 2, 3]; ) return от контроллера, и этот день будет активен в 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.

enter image description here

...