Generally we integrate the datepicker in jquery. it gets only the date but if you want to place the time along with the date use the datetimepicker instead of datepicker.
In jquery has only the datepicker . you need the datetimepicker then you must load the timepicker addon.
You need to load these CSS files
And you need to load these JS files
How to integrate the jquery datepicker
After that place the one input text field and give the id as datetimepicker like this
Then bind the date and time picker addon to the id datetimepicker
Out put is
How to block the particular weekdays in the jquery datepicker
Datetimepicker code
Download Demo
In jquery has only the datepicker . you need the datetimepicker then you must load the timepicker addon.
You need to load these CSS files
1 2 | http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.csshttps://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css |
1 2 3 | http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.jshttps://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js |
After that place the one input text field and give the id as datetimepicker like this
1 | <input type ="text" id="datetimepicker" name="datetime"> |
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function () { $(function() { $("#datetimepicker").datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm:ss', }).datetimepicker("setDate", new Date()); }); }); </script> |
Datetimepicker code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Datetimepicker</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script> <style> body { font: 12px sans-serif; } </style> </head> <body> <input type ="text" id="datetimepicker" name="datetime"> <script> $(document).ready(function () { $(function() { $("#datetimepicker").datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm:ss', }).datetimepicker("setDate", new Date()); }); }); </script> </body> </html> |
Download Demo
* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff
