Question

我想在我的项目中使用datetimepicker。用jquery怎么可能？我有一个文本框，div和日历。一旦我专注于文本框，日历div就会变得褪色。我想做的一些方法是这样的：一旦我点击日历，所选的值应该显示在文本框中，日历应该隐藏。怎么样？

到目前为止，这是代码。

$(document).ready(function()  {
  $(".txtDateTime").focus(function () { 
    $(".CalenderDiv").fadeIn("slow");
  });
  $(".UserCalender").click(function () { 
    $(".CalenderDiv").fadeout("slow");
    $(".txtDateTime").val("fdgfg");
    // ================??????
  });
});

此代码一旦我点击文本框日历将显示。但是在日历的情况下点击它不起作用？为什么......请帮帮我....

Answer 1

你应该检查jQUeryUI的Datepicker小部件：http://jqueryui.com/demos/datepicker/

小部件已经获得了您正在寻找的功能..而且您不必创建自己的日历。

Answer 2

好像你正在从jQuery UI重新发明datepicker小部件。那是对的吗？为什么不使用什么有效？

完整代码：

<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>

演示：http://jsbin.com/ewime

Jquery：datetimepicker的基本功能.......问题

2 个答案: