Событие onSelect в JQuery Datepicker, похоже, не срабатывает

0

Вероятно, это простая ошибка, но последние 3 часа я пытался выяснить, без успеха.

В конце концов, мне хотелось бы использовать введенную дату и сравнить ее с датой истечения срока, чтобы сказать, слишком поздно ли представление. На данный момент, однако, для упрощения целей мне просто хотелось бы сказать мне, что дата изменилась, но без успеха. Где я здесь не так?

$("#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>
  • 0
    пожалуйста, отправьте HTML, а также
Теги:
datepicker

1 ответ

0

Кажется, что есть проблема с вашим JavaScript, и вам нужно будет увидеть консольные сообщения, чтобы увидеть, что происходит не так.

Во всяком случае, я хотел бы увидеть полный HTML и код, прежде чем делать какие-либо комментарии или полное решение. Но в соответствии с вашим запросом держать вещи простыми и видеть, что изменившаяся дата была правильно захвачена, мы должны следовать следующему подходу.

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

Здесь "dateText" должен содержать желаемую выбранную дату. Для этого проверьте консоль браузера. Если, однако, есть ошибка, отображается правильная ошибка.

Как только вы получите соответствующую дату, вы можете выполнить сравнения.

Включение ошибки, пожалуйста, сообщите здесь сообщение об ошибке, и мы сможем обсудить больше.

Поделиться
  • 0
    Я использовал указанный вами код, но в консоли ничего не появляется - ни в Chromium, ни в Firebug. Я мог бы опубликовать полный HTML-код, но это страница Django, и она довольно длинная и сложная. Все остальное работает отлично, поэтому я подумал, что ошибка должна быть связана с новым кодом.
  • 0
    Если console.log () ничего не печатает на экране, это означает, что код никогда не отправляется на консоль. Это может означать, что что-то идет не так, прежде чем код datepicker будет выполнен, и компилятор никогда не достигнет этой точки.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню