Using Datepicker (from Jquery) in django

Question

I want to use Datepicker(from Jquery) on django in this way:

Through the "views.py" i'm sending a list of dates from mysql DB. I want to display a message when a date that a user had chosen is equal to one of the dates i have in the DB.

How can i make this happen? (with Django, Jquery and AJAX)

My code so far:

{% 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 %}
 ...............

Thanks.

Answer 1

Here's a working example: http://jsfiddle.net/njsmu356/

Add all the dates to a div and hide it.

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

Then use jQuery to find a match of the selected date with the dates in <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.");
        }
    });

Note:

Be sure that the format of the selected date is same as that of the dates you are sending from your view. You may also need to validate the input value of the date. Some jQuery form validation plugins will help.

Update

Since you want to do this with AJAX, there are already so many answers accomplishing similar functionality.

1. Django: ajax response for valid/available username/email during registration
2. AJAX username validation in Django
3. And a lot here