Here’s a simple jQuery Datepicker example.
< head > < title >Ashish's blog -Datepicker</ title > < link type = "text/css" rel = "Stylesheet" href = "http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" /> < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" > </ script > < script type = "text/javascript" src = "http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" > </ script > < script type = "text/javascript" > $(function () { $("#date").datepicker(); }); </ script > </ head > < body > < input id = "date" type = "text" /> </ body > </ html > |
In above example,date formate id mm/dd/yy but you change it to (‘dd-mm-yy’) by changing code:
<script type= "text/javascript" > $(document).ready(function () { $(function () { // $("#txtInvoiceDate").date_input(); $( "#date" ).datepicker({ dateFormat: 'dd-mm-yy' }); }); }); </script> |
OR prevent users from selecting weekends ..
<script type= "text/javascript" > $(function () { $( "#datepic" ).datepicker({ beforeShowDay: $.datepicker.noWeekends }); }); </script> |
OR how to disable all the future dates….
<script type= "text/javascript" > $(function () { var date = new Date(); var currentMonth = date.getMonth(); var currentDate = date.getDate(); var currentYear = date.getFullYear(); $( "#datepic" ).datepicker({ maxDate: new Date(currentYear, currentMonth, currentDate) }); }); </script> |
Thanks
Hi there I am so thrilled I found your website, I really found you by error, while I was browsing on Yahoo for something else, Anyways I am here now and would just like to say thanks a lot for a tremendous post and a all round exciting blog (I also love the theme/design), I don’t have time to look over it all at the minute but I have saved it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.
Thank you to share