Jquery: basic function of datetimepicker .......Problem_问答_开发者

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

开发者 https://www.devze.com 2022-12-22 16:38 出处：网络

相关专题：asp.net jquery

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.