在点击事件中显示日历

时间:2014-12-12 11:19:29

标签: javascript jquery html

此代码在输入框中运行良好。它在标记中不起作用 我想在标签'sample'中获得相同的操作 我附上了我的代码。

<div id="datepickerContainer">
</div>
<input id="datepicker" type="text">

<script src="/external/jquery.js"></script>
<script src="/jquery-ui.js"></script>
 <script>
 $( "#datepicker" ).datepicker({
    inline: true
 });
  $('#datepickerContainer').on('click',function() { $( "#datepicker" ).datepicker('show'); });

   // Hover states on the static widgets
   $( "#dialog-link, #icons li" ).hover(
   function() {
    $( this ).addClass( "ui-state-hover" );
   },
    function() {
    $( this ).removeClass( "ui-state-hover" );
  }
);
</script>

1 个答案:

答案 0 :(得分:1)

使用以下html和JavaScript代码。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
        <script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>

        <title>Content Delv Logs</title>
         <script type="text/javascript">
            $(window).ready(function() {
                $('#date-pick').datePicker({clickInput: true});
            });
        </script>
    </head>

    <body>
            <input type="text" name="date" id="date-pick" value=""/>
    </body>
</html>