<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Change background color Unavailable date</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/start/jquery-ui.css"> <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script> <style type='text/css'> .ui-datepicker td.ui-state-disabled>span{background:#F70C0C;} .ui-datepicker td.ui-state-disabled{opacity:100;} </style> <script type='text/javascript'>//<![CDATA[ var unavailableDates = ["17-10-2015", "18-10-2015", "20-10-2015"]; function unavailable(date) { dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); if ($.inArray(dmy, unavailableDates) == -1) { return [true, ""]; } else { return [false, "", "Unavailable"]; } } $(function() { $("#iDate").datepicker({ dateFormat: 'dd MM yy', beforeShowDay: unavailable }); }); //]]> </script> </head> <body> <input id="iDate"> </body> </html>
article
Friday, October 16, 2015
Jquery UI Datepicker Change background color Unavailable date
Jquery UI Datepicker Change background color Unavailable date
Jquery Datepicker Load Specified Date
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>
Subscribe to:
Posts (Atom)