Link to home
Start Free TrialLog in
Avatar of GAUTAM
GAUTAMFlag for United States of America

asked on

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
Avatar of JESii
JESii
Flag of United States of America image

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
Avatar of GAUTAM

ASKER

@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

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

ASKER CERTIFIED SOLUTION
Avatar of JESii
JESii
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial