How to Disable jQuery Datepicker from mysql value/content

Question

I'm currently doing a Hotel Reservation website and I'm trying to learn how to disable jQuery DatePickers depending on the values from database.

For example, the dates March 1 up to March 5 are inserted into the Database A tables checkin and checkout rows.

So now checkin has March 1 value and checkout has March 5.

Let's say I have two jQuery datepicker, one for checkin and one for checkout. How do I disable the days March 1 and March 5 in them taken from the value inside the database?

Here's my current script for the datepicker:

$(function () {

$("#checkin").datepicker({
    dateFormat: "M-dd-yy",
    minDate: 0,
    onClose: function () {


        var date2 = $('#checkin').datepicker('getDate');
        date2.setDate(date2.getDate() + 1);
        $('#checkout').datepicker('setDate', date2);
        $('#checkout ').datepicker('option', 'minDate', date2);
         datepicked();

      $('#checkout').datepicker('option');



}
});
$('#checkout').datepicker({
    dateFormat: "M-dd-yy",
    minDate: 0,

    onSelect: function () {
        var dt1 = $('#checkin ').datepicker('getDate');
        var dt2 = $('#checkout').datepicker('getDate');
        datepicked();
        //check to prevent a user from entering a date below date of dt1

    if (dt2 <= dt1) {
            var minDate = $('#checkout ').datepicker('option', 'minDate');
            $('#checkout').datepicker('setDate', minDate);


           $('#checkin').datepicker('option');



    }


    }

});


var datepicked = function() {
var checkin = $('#checkin');
var checkout = $('#checkout');
var nights = $('#nights');

    var fromDate = checkin.datepicker('getDate');

    var toDate = checkout.datepicker('getDate');

    if (toDate && fromDate) {

        var oneDay = 1000*60*60*24; 
        var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay); 
        nights.val(difference);
        } 
};
 });  
$(function () { 
$("#date").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 0,
    autoclose: true,
    startDate: new Date() 
});
   });

Thank you very much in advanced.

Where's your [mcve]? What have you tried? – j08691 Feb 24 '18 at 17:13 — j08691, Feb 24 '18 at 17:13
@j08691 I've added my *working* datepicker script. – Joshua C. Feb 24 '18 at 17:15 — Joshua C., Feb 24 '18 at 17:15
@JoshuaC, you provided no server side code in PHP ! – Istiaque Ahmed Feb 24 '18 at 17:47 — Istiaque Ahmed, Feb 24 '18 at 17:47

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

If you try to set initial value's for this input's just use setDate after datepicker initializtion. In PHP set value attribute for input:

<input id="checkin" value="<?= date('M-dd-yy', $valueFromDbCheckin) ?>">

And just call setDate:

$( "#checkin" ).datepicker( "setDate", $('checkin').val() );

If you try to disable some date's in datepicker's then you probably could try this solution:
Disable array of date's Jquery DatePicker

How to Disable jQuery Datepicker from mysql value/content

1 Answers1