We help IT Professionals succeed at work.

Doubt regarding jQuery time picker

Hi Experts...
I have a jQuery datetime picker which works fine but i want to retain the plugin format and distribute the plugin's output in two separate text boxes instead of a single one.

Now in a single text box itself the output got is for example:11/05/2011 16:52:43 which i want to put in two text boxes with the name date and time.

And how to i initiate the plugin using an onclik event of a button instead of onselect of the text box which is the default behaviour.

The code and reqired files are attached below.

Please help...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  
  
 
 
  <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.16.custom.css" />
  
   <style type="text/css">
   #ui-datepicker-div{ font-size: 80%; }
 
   /* css for timepicker */
   .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
   .ui-timepicker-div dl { text-align: left; }
   .ui-timepicker-div dl dt { height: 25px; }
   .ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
   .ui-timepicker-div td { font-size: 90%; }
   .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
   
  </style> 
  
  
 
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
 
<script type="text/javascript"> 
 
 
 $(document).ready(function(){
 
$('#example6').datetimepicker({
 showSecond: true,
 timeFormat: 'hh:mm:ss'
});
});
</script>
 
 
 </head>
  <body>
 
 <input type="text" name="example6" id="example6" value="" />
 
 </body>
</html>

Open in new window

jquery-ui-timepicker-addon.js
jquery-ui-1.8.16.custom.min.js
jquery-ui-1.8.16.custom.css
jquery-1.6.4.min.js
Comment
Watch Question

Commented:
In jQuery, you can execute the onclick function with syntax like this:
   $('#example6').click
This doesn't generate an event, but it does fire the function associated with the onclick event.

To split the results, you could do something like the following:
1. Put the initial results of the datetimepicker into a text field which is hidden (style="display:none")
2. Parse that hidden text and drop the data into your two text boxes

Author

Commented:
@JESii:Thanks for the reply.

Here i have the code where the data is generated in the format 11/06/2011 01:21:26 in the textbox with the id 'example6' what do i change in the code so as to put the date 11/06/2011 in the textbox with the id 'example7' and the time 01:21:26 in the textbox with the id 'example 8'.

Please help...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  
  
 

  <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.16.custom.css" />
  
   <style type="text/css">
   #ui-datepicker-div{ font-size: 70%; }



   /* css for timepicker */
   .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
   .ui-timepicker-div dl { text-align: left; }
   .ui-timepicker-div dl dt { height: 25px; }
   .ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
   .ui-timepicker-div td { font-size: 90%; }
   .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
   
  </style> 
  
  
 
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script>
	$(function() {
		$( "#example6" ).datetimepicker({
			showOn: "button",
			buttonImage: "Calendar_small.gif",
			buttonImageOnly: true,
			showSecond: true,
 			timeFormat: 'hh:mm:ss'
		});
	});
</script> 
 





 </head>
  <body>
 <input type="text" name="example6" id="example6" value="" />
<input type="text" name="example7" id="example7" value="" />
 <input type="text" name="example8" id="example8" value="" />



 </body>
</html>

Open in new window

Commented:
OK; the attached code works (check it out in jsfiddle.net/59LJA if you'd like).

I didn't add code to hide the datepicker field but that's easy to do with the hide() function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.16.custom.css" />
   <style type="text/css">
   #ui-datepicker-div{ font-size: 80%; }
   /* css for timepicker */
   .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
   .ui-timepicker-div dl { text-align: left; }
   .ui-timepicker-div dl dt { height: 25px; }
   .ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
   .ui-timepicker-div td { font-size: 90%; }
   .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
  </style> 
     <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
     <script type="text/javascript" src=jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript"> 
 $(document).ready(function(){
$('#example6').datetimepicker({
     showSecond: true,
     timeFormat: 'hh:mm:ss'
    });
$('#example6').focusout(function(e) {
    var date = $('#example6').val().split(" ")[0];
    var time = $('#example6').val().split(" ")[1];
    $('#date').val(date);
    $('#time').val(time);
    });
});
</script>
 </head>
  <body>
      <input type="text" name="example6" id="example6" value="" />
      <input type="text" name="date" id="date" value="" />
      <input type="text" name="time" id="time" value="" />
 </body>
</html>

Open in new window

Commented:
BTW, I'm sure that there are other, better ways to handle this, using explicit callbacks or even a queue, but this shows what can be done.

Also, for production, you'd want to do more: like hide #example6 after entering the data, protecting the focusout function to work only if there's something in #example6, and even providing a button to clear and redisplay #example6 if you wanted to enter another date.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.