2016-03-21 2 views
0

Я использовал datepicker от http://foxrunsoftware.github.io/DatePicker/ и скопировал его демо, но datepicker не отображается. Я проверил все, но не может узнать reason..please помочь мне, это мой кодDatepicker display issue

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

Проверьте консоль и узнайте, есть ли какая-либо ошибка. Также проверьте путь к файлам скриптов, которые вы включили. –

+0

может обеспечить скрипку? –

+0

спасибо Джон, я проверил консоль, и у нее ничего не получилось! Путь и файл сценария верны, так что это моя проблема, я не знаю, как ее решить – jimmyxu

ответ

0

Пожалуйста, инициализировать сценарий Datepicker после DOM готов.

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