在 django 中使用 Datepicker(来自 Jquery）

Using Datepicker (from Jquery) in django

本文关键字：来自 Jquery Datepicker django      更新时间：2023-09-26

我想在django上使用Datepicker（来自Jquery），这样：

通过"views.py"，我从mysql DB发送日期列表。我想在用户选择的日期等于我在数据库中的日期之一时显示一条消息。

我怎样才能做到这一点？（使用 Django、Jquery 和 AJAX）

到目前为止我的代码：

{% block head %}
<link href="{{STATIC_URL}}css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="{{STATIC_URL}}js/jquery1.min.js"></script>
<script src="{{STATIC_URL}}js/jquery-ui.min.js"></script>

<script>
$(function() {
    $( "#datepicker" ).datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
    });
    date = $( "#datepicker" ).datepicker('getDate');
});
</script>
{% endblock %}
{% block body_block %}
<br/><br/><br/><br/><br/><br/><br/>
<form id="form" name="form" action="/home/" method="get">
    <label>Choose Date</label>
    <br/>
    <input style="color:black" id="datepicker"/>
    <br/><br/>
</form>
{% for date in dates %}
 ...............

谢谢。

这是一个工作示例： http://jsfiddle.net/njsmu356/

将所有日期添加到div 并将其隐藏。 

<div id="dateDiv" style="display:none;">
    <ul id="dates">
        {% for date in dates %} 
            <li>date</li> 
        {% endfor %}
    </ul>
</div>

然后使用 jQuery 查找所选日期与 <li> 中的日期的匹配项。

    $('#datepicker').change(function() {
        // Get the value of date field
        var dateValue = $('#datepicker').val();
        // Make and empty list
        var dateList = [];
        // Append all dates from <li> to dateList
        $("#dates li").each(function() {
            dateList.push($(this).text()); 
        });
        // Perform the match    
        if ($.inArray(dateValue, dateList  ) > -1) {
            alert("Date matched!!!");
        } else {
            alert("Sorry. Try again.");
        }
    });

注意：

确保所选日期的格式

与您从视图中发送的日期的格式相同。您可能还需要验证日期的输入值。一些jQuery表单验证插件会有所帮助。

更新

由于您想使用 AJAX 执行此操作，因此已经有很多答案可以实现类似的功能。

  1. Django：在注册期间对有效/可用用户名/电子邮件的 ajax 响应
  2. Django 中的 AJAX 用户名验证
  3. 这里还有很多
相关文章：