0

I'm trying to write a web page which tells user to input a date of booking, this input field has jQuery calender. I've also successfully disable specific dates so no 2 users book a same date.

My question is how can I read a file from server, get Dates, process and disable them in jQuery calender? Or is there a way to send data from PHP to JavaScript? JSFiddle. Here is my code:

var eventDates = ["28/1/2018", "27/1/2018", "2/2/2018"];

$(function() {
    $("#iDate").datepicker({
    beforeShowDay : function(date) {
        var disDate = date.getDate();
        var disMonth = date.getMonth();
        var disYear = date.getFullYear();

        var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;

        if ($.inArray(formattedDate, eventDates) != -1) {
            return[false]
        } else {
            return[true]
        }

    }        
    });
});
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    </head>
    <body>
        Date: <input id="iDate">
    </body>
</html>
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
Aqeel
  • 31
  • 1
  • 1
  • 6

1 Answers1

0

Make an ajax request like below, that php service will return disabled dates.

$.get('your_file.php').done(function(eventDates){
    $("#iDate").datepicker({
        beforeShowDay : function(date) {
            var disDate = date.getDate();
            var disMonth = date.getMonth();
            var disYear = date.getFullYear();

            var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;

            if ($.inArray(formattedDate, eventDates) != -1) {
                return[false]
            } else {
                return[true]
            }

        }        
    });
});

or directly print out your array into html output like below:

<?php

$disabledDates = array("2012-01-01", "2012-02-02");

?>



<script type="text/javascript">

var eventDates = <?php echo json_encode($disabledDates); ?>


$("#iDate").datepicker({
        beforeShowDay : function(date) {
            var disDate = date.getDate();
            var disMonth = date.getMonth();
            var disYear = date.getFullYear();

            var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;

            if ($.inArray(formattedDate, eventDates) != -1) {
                return[false]
            } else {
                return[true]
            }

        }        
    });
</script>
Ali Bahrami
  • 5,935
  • 3
  • 34
  • 53
  • My PHP code just reads the file, and returns the content with 'return $filesArray[0]'. It that OK?. Other thing is that now the page takes time to load. – Aqeel Jan 28 '18 at 07:51
  • @Aqeel if it's a time taking process, I suggest you to do a ajax request like the first example. First load the page then make an ajax request to read dates. – Ali Bahrami Jan 28 '18 at 09:06
  • Got everything right but a there is a little problem. How can I pass PHP Array of Dates to Javascript Array of Dates?. because I have a list of dates stored in a text file and when passing dates array to javascript, they are translated as one string. running a .split("\n") function also does nothing. – Aqeel Jan 28 '18 at 11:43
  • @Aqeel Read it here https://stackoverflow.com/questions/10837022/convert-php-date-into-javascript-date-format – Ali Bahrami Jan 28 '18 at 11:53
  • json_encode() works only when JS and PHP are written in same file. I want to pass data from PHP, a text file is being read by PHP and processed through 'For' loop to get and array. to a separate Javascript file. Any other way to do that? – Aqeel Jan 28 '18 at 13:27
  • @Aqeel Doesn't matter, you create another php file and make ajax request to it. – Ali Bahrami Jan 28 '18 at 16:13
  • I did make ajax request from separate JS file.. Requested PHP array, bur is returnined as Regex expression. – Aqeel Jan 28 '18 at 17:08