jQuery Datepicker中的onSelect事件似乎不會觸發

這可能只是一個簡單的錯誤，但我花了最後3個小時試圖弄清楚 - 沒有成功。jQuery Datepicker中的onSelect事件似乎不會觸發

我最終想做的是使用輸入的日期，並將其與截止日期進行比較，以表明提交是否爲時過晚。但是，目前爲了簡化目的，我只想告訴我日期已經改變，但沒有成功。我在哪裏錯了？

$("#id_submission_date").datepicker({ 
    onSelect: function(dateText) { 
     $("#late_submission_warning").text("Date selected"); 
    } 
});

下面是從頁（縮短）HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title> Feedback for Student, Test</title> 
    <meta name="description" content=""> 
    <link href="/static/css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="/static/css/jquery.qtip.min.css" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
     .sidebar-nav{ 
      padding: 9px 0; 
     } 
    </style> 
</head> 

<body> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
... 
</nav> 

<form action="" method="post" accept-charset="utf-8" role="form"> 
<input type='hidden' name='csrfmiddlewaretoken' value='...' /> 

<div class="container"> 

    <h1>European Law (2013/2014): Essay</h1> 
    <h2>Test Student</h2> 
    ... 

    <label for="submission_date">Submission Date</label> 
    <input class="form-control" data-date-format="dd/mm/yyyy" id="id_submission_date" name="submission_date" type="text" value="13/04/2015" /> 

    <select class="form-control" id="id_category_mark_2" name="category_mark_2"> 
    <option value="" selected="selected">---------</option> 
     <option value="39">0 - 39 %</option> 
     <option value="49">40 - 49 %</option> 
     <option value="59">50 - 59 %</option> 
     <option value="69">60 - 69 %</option> 
     <option value="79">70 - 79 %</option> 
     <option value="80">80 or more</option> 
    </select> 

    <div id="late_submission_warning"></div> 

    <h4>General Comments</h4> 
    <textarea class="form-control" cols="40" id="id_comments" name="comments" rows="10"> 
    </textarea> 
    <br><br> 
    <input type = "submit" value="Save" class="btn btn-default"> 
    </form> 
</div> 

<script src="/static/js/jquery.min.js"></script> 
<script src="/static/js/bootstrap.js"></script> 
<script src="/static/js/bootstrap-datepicker.js"></script> 
<script src="/static/js/jquery.tablesorter.js"></script> 
<script src="/static/js/jquery.metadata.js"></script> 
<script src="/static/js/jquery.validate.min.js"></script> 
<script src="/static/js/bootbox.min.js"></script> 
<script src="/static/js/jquery.qtip.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() 
    { 
    $("#sortable_table").tablesorter({ 
     sortList: [[0,0],[1,0]] 
     }); 
    } 
); 

</script> 

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#id_submission_date").datepicker({ 
     onSelect: function(dateText) { 
      console.log(dateText); 
     } 
    }); 

    $("#category_2").qtip({ 
     content: { 
      text: '80+ very full and perceptive awareness of issues, with original critical and analytical assessment of the issues and an excellent grasp of their wider significance.<br />70+ full and perceptive awareness of issues and a clear grasp of their wider significance.<br />60 - 69 adequate awareness of issues and a serious understanding of their wider significance.<br />50 - 59 some awareness of issues and their wider significance.<br />40 - 49 limited awareness of issues and their wider significance.<br />Below 40 very limited awareness of issues and of their wider significance.' 
      } 
     }); 
    }); 

</script> 

</body> 
</html>

來源

2014-04-27 Tobi

請發佈html以及 –

那麼它似乎有一個問題的地方與你的JavaScript和你將不得不看到控制檯的信息看什麼出錯了。

無論如何，我希望在提出任何意見或完整解決方案之前查看完整的HTML和代碼。但根據您的要求，爲了簡單起見，看到更改的日期已被正確捕獲，我們必須遵循以下方法。

 $("#id_submission_date").datepicker({ 
     onSelect: function(dateText) { 
     console.log(dateText); 
     } 
    });

這裏「dateText」應該包含所需的選定日期。檢查您的瀏覽器控制檯。但是如果出現錯誤，則會顯示正確的錯誤。

一旦你得到合適的日期，你可以做比較。

錯誤的遺漏，請在這裏發佈錯誤消息，我們可以討論更多。

來源

2014-04-27 10:38:42

我已經使用了您指定的代碼，但沒有任何內容出現在控制檯中 - 無論是在Chromium還是在Firebug中。我可以發佈完整的HTML代碼，但它是一個Django頁面，而且非常複雜。其他的一切都很好，所以我認爲這個錯誤肯定在新代碼中。 – Tobi

如果console.log（）沒有在屏幕上打印任何內容，這意味着代碼永遠不會進入控制檯。這可能意味着在執行datepicker代碼之前出現錯誤，並且編譯器永遠不會到達這一點。 –

奇怪的是，當我點擊字段時，日期選擇器本身就會顯示出來。如果代碼中有錯誤，通常不會那樣做，是嗎？ – Tobi

jQuery Datepicker中的onSelect事件似乎不會觸發

回答

相關問題