Jquery Datepicker Load Specified Date
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { var availableDates = [ <?php for ($x = 0; $x <= 10; $x++) { ?> "<?php echo $x; ?>-10-2015", <?php } ?>]; function available(date) { dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); if ($.inArray(dmy, availableDates) != -1) { return [true, "","Available"]; } else { return [false,"","unAvailable"]; } } $('#date').datepicker({ beforeShowDay: available, // The hidden field to receive the date altField: "#dateHidden", // The format you want altFormat: "yy-mm-dd", // The format the user actually sees dateFormat: "dd/mm/yy", onSelect: function (date) { alert(date); } }); }); </script> </head> <body> <div id="date"></div> Not hidden just for the sake of demonstration: <input type="text" id="dateHidden" /> </body> </html>