GAUTAM
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...
jquery-ui-1.8.16.custom.min.js
jquery-ui-1.8.16.custom.css
jquery-1.6.4.min.js
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>
jquery-ui-timepicker-addon.jsjquery-ui-1.8.16.custom.min.js
jquery-ui-1.8.16.custom.css
jquery-1.6.4.min.js
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...
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>
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.
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
$('#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