CODEWITHSUNDEEP
phpjquerylaravellaravel-5datepicker
Arafat Rahman
Arafat Rahman

Reputation: 1015

Disable date for selected days in datepicker

I have an online appointment form in my Laravel application with some filed Select Doctor and datepicker.

Suppose doctor A will be available in clinic at Saturday, Monday and Wednesday. And doctor B will be available at Sunday, Tuesday, Thursday. So while any patient choose doctor A from the Select Doctor field, all the dates with Saturday, Monday and Wednesday will be activated in the datepicker calendar and other dates will be deactivated.

I have already deactivated some selected dates of datepicker calendar. But can't disable date for selected days in 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

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

controller

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;
}

Calendar enter image description here

How to solve the issue ? Anybody Help Please ? Thanks in Advance.

Upvotes: 2

Views: 3178

Answers (2)

Arafat Rahman
Arafat Rahman

Reputation: 1015

Here Every day has a fix number like

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

So an Array of day's number(ex : var arr = [1, 2, 3];) return from the controller and those day will be active in the datepicker.

Just change the below code in 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)];
    });

So here only Monday,Tuesday and Wednesday will active in the datepicker calendar.

enter image description here

Upvotes: 0

Ehsan Mahmud
Ehsan Mahmud

Reputation: 743

From the first look, it seems like a problem of date mismatch. If you use the example below, you can see how the data coming from the API should look like.

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">

Upvotes: 3

Related Questions