4
Answers

datepicker is not showing with datetime.

venkat

venkat

7y
220
1
Hi All,
 
my datepicker is not showing datetime, mean it is showing date only. please give me any suggestions. below is my code.please find below snapshot. i need to display with date and time .
 
<input id="txtdatepicker" type="text" class="dynamicdatepicker" value=""/>
$(".dynamicdatepicker").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
});
 
 
Answers (4)
1
Srikant Maruwada

Srikant Maruwada

NA 501 4.3k 7y
Hi Venkat,
 
Default Jquery DatePicker does not have Time option https://jqueryui.com/datepicker/#default. You have to include other addon plugin. In my Example I have referred time picker.
Also I have proviede below sample. Let me know if you require further inforamtion.
 
  1. <html lang="en">  
  2. <head>  
  3.   <meta charset="utf-8">  
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  5.   <title>jQuery UI Datepicker - Default functionality</title>  
  6.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  7.   <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">  
  8.   <link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">  
  9.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  
  10.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
  11.   <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>  
  12. <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>  
  13. <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>  
  14.   <script>  
  15.   $( function() {  
  16.     $( "#datepicker" ).datetimepicker();      
  17.   } );  
  18.   </script>  
  19. </head>  
  20. <body>  
  21. <p>Date: <input type="text" id="datepicker"></p>  
  22.    
  23. </body>  
  24. </html>  
 
 
1
Ibrahim Siddique

Ibrahim Siddique

NA 950 5.5k 7y
Hi Venket, 
 
Please find below details  
 
$('#basic_example_1').datetimepicker();
 
Ref : http://trentrichardson.com/examples/timepicker/ 
0
Ajeesh

Ajeesh

NA 349 1.6k 7y
You could also try with the below approach which use a custom approach to add time to Jquery date picker
 
Ensure that you have referenced the Jquery JS file before using this function
  1. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />  
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">script>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">script>  
HTML Mark Up
  1. <input calendar="True" dateformat="mm/dd/yy" id="DueDate" name="DueDate" style="font-size: 12px;" type="text" />  
JQuery Function
  1. $("#DueDate").datepicker();  
  2. $( "#DueDate" ).datepicker( "option", "dateFormat", "mm/dd/yy" + " " + getCurrentTime() );  
  3.   
  4. function getCurrentTime() {  
  5.     var CurrentTime = "";  
  6.     try {  
  7.         var CurrentDate = new Date();  
  8.         var CurrentHours = CurrentDate.getHours();  
  9.         var CurrentMinutes = CurrentDate.getMinutes();  
  10.         var CurrentAmPm = "A'M'";  
  11.         if (CurrentMinutes < 10) { CurrentMinutes = "0" + CurrentMinutes; }  
  12.   
  13.         if (CurrentHours == 12) {  
  14.             CurrentHours = 12;  
  15.             CurrentAmPm = " P'M'";  
  16.         }  
  17.         else if (CurrentHours == 0) {  
  18.             CurrentHours = 12;  
  19.             CurrentAmPm = " A'M'";  
  20.         }  
  21.         else if (CurrentHours > 12) {  
  22.             CurrentHours = CurrentHours - 12;  
  23.             CurrentAmPm = " P'M'";  
  24.         }  
  25.         else {  
  26.             CurrentAmPm = " A'M'";  
  27.         }  
  28.         CurrentTime = "" + CurrentHours + ":" + CurrentMinutes + CurrentAmPm + "";  
  29.     }  
  30.     catch (ex) {  
  31.     }  
  32.     return CurrentTime;  
  33. }  
0
Rajeesh Menoth

Rajeesh Menoth

NA 24.7k 629.4k 7y
Hi,
 
Please check the following examples :
 
https://stackoverflow.com/questions/11183730/jquery-ui-datetimepicker-change-date-time-format-showed-in-text
 
https://coderwall.com/p/muwupg/datepicker-with-time-timepicker-jquery-ui
 
https://github.com/xdan/datetimepicker
 
https://www.malot.fr/bootstrap-datetimepicker/demo.php 
Next Recommended Forum