Question

我使用了来自http://foxrunsoftware.github.io/DatePicker/的datepicker并复制了它的demo，但是datepicker没有显示。我检查了一切，但无法找出原因..请帮助我，这是我的代码

 <html>
    <title>test</title>
    <head>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./datepicker/js/datepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="./datepicker/css/base.css" />
    <link rel="stylesheet" type="text/css" href="./datepicker/css/clean.css" />

    <script>
//this is the script code
    $('#inputDate').DatePicker({
      mode: 'single',
      position: 'right',
      onBeforeShow: function(el){
        if($('#inputDate').val())
          $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
      },
      onChange: function(date, el) {
        $(el).val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear());
        if($('#closeOnSelect input').attr('checked')) {
          $(el).DatePickerHide();
        }
      }
    });

    </script>
    </head>
    <body>
        <input id="inputDate" class="inputDate" value="" >
        <label id="closeOnSelect" class="checkbox"><input type="checkbox" checked="checked"> Close on selection</label>
    </body>
    </html>

Answer 1

请在DOM准备好后初始化Datepicker脚本。

    <script>
    $(document).ready(function(){
      $('#inputDate').DatePicker({
      mode: 'single',
      position: 'right',
      onBeforeShow: function(el){
        if($('#inputDate').val())
          $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
      },
      onChange: function(date, el) {
        $(el).val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear());
        if($('#closeOnSelect input').attr('checked')) {
          $(el).DatePickerHide();
        }
      }
    });
   });
    </script>

Datepicker显示问题

1 个答案: