Jquery: basic function of datetimepicker .......Problem

Question

I want make datetimepicker in my project. Using jquery how it is possible? I 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....

Cheeso · Accepted Answer · 2010-03-10 11:12:21Z

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

zen.c · Accepted Answer · 2010-03-10 11:07:08Z

1

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.

answered Mar 10, 2010 at 11:07

zen.c

6988 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery: basic function of datetimepicker .......Problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related