Jquery: basic function of datetimepicker .......Problem
I want make datetimepicker in my project. Using jquery how it is possible? I开发者_Python百科 have one text box, div and calendar. Once i focus on textbox, the calendar div gets fadein. Some way what i want to do is this: Once i click on calender the selected value should show in textbox and calender should hide. How?
Here is the code so far.
$(document).ready(function() {
$(".txtDateTime").focus(function () {
$(".CalenderDiv").fadeIn("slow");
});
$(".UserCalender").click(function () {
$(".CalenderDiv").fadeout("slow");
$(".txtDateTime").val("fdgfg");
// ================??????
});
});
This code once i click textbox calender will show. But in the case of Calendar click it is not working? Why....Please Help me....
Seems like you are re-inventing the datepicker widget from jQuery UI. Is that correct? Why not just use what works?
full code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple DatePicker example</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"></link>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type="text/javascript" language='javascript'>
$(document).ready( function (){
$('.pick-date').datepicker({clickInput:true});
});
</script>
</head>
<body>
<h1>jQuery UI datepicker example</h1>
<div class="inputDiv">
<p>Click in the box to select a date:</p>
<input id='b1' class='pick-date' value=''/>
</div>
</body>
</html>
demo: http://jsbin.com/ewime
You should checkout jQUeryUI's Datepicker widget: http://jqueryui.com/demos/datepicker/
The widget has got the functionality you are looking for.. and you do not have to create your own calendar.
精彩评论