I have added the datepicker function but I am not able to use it. I believe that it is I am doing some fundamental mistake since I am a beginner in javascript and jQuery.

The **input tag** is in the invite.html file which I am including using django's template tags all the jquery and semantic files I have downloded them in the static folder. I have added the datepicker.js files also I.Thanks in advance. I added and alert in the datepicker script it worked fine, So I think it is the function is added properly but 

I get these errors:

> 
> jQuery.Deferred exception: $(...).datepicker is not a function  
> 
>  TypeError: $(...).datepicker is not a function
> 
> 
> 

Scholarship.html is the main html file in which I have included the invite.html file and the input tag id="datepicker" is in bold in invite.html the fuction that is generating the is in bold. 

base.html

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fusion!
        {% block title %}{% endblock %}
    </title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/mediaquery.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic-notify.css' %}">

    <script type="text/javascript" src="{% static 'globals/js/jquery.min.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/jquery.formset.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/semantic-notify.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/ajax-post.js' %}"></script>
    {% block css %}
    {% endblock %}

</head>

{% comment %}style="background-color: rgba(189, 189, 189, 0.1);"{% endcomment %}
<body id="body">

{% block body %}
    {% block navBar %}
    {% endblock %}
{% endblock %}

    <div id="messages">
        {% for message in messages %}
            <div class="message" tag="{% if 'success' in message.tags %}green{% elif 'error' in message.tags %}red{% else %} blue {% endif %}" message="{{ message|safe }}"></div>
        {% endfor %}
    </div>
</body>

<script type="text/javascript" src="{% static 'globals/js/semantic.min.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/dropdown.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/tab.js' %}"></script>

<script>

    $(document).ready(function() {

        $('#messages').find('.message').each(function(){
            $.uiAlert({
                textHead: $(this).attr('message'), // header
                text: '',
                bgcolor: $(this).attr('tag'), // background-color
                textcolor: '#fff', // color
                position: 'bottom-left',// position . top And bottom ||  left / center / right
                time: 3, // time
            });
        });

        $('#new-notification')
            .popup({
                inline: true,
                hoverable: true,
                position: 'bottom left',
                popup: $('#notificationPopup'),
                on: 'click',
                delay: {
                    show: 250,
                    hide: 500
                }
            })
        ;
    });
</script>

```

Scholarship.html

```
    {% extends 'globals/base.html' %}
        {% load static %}

        {% block title %}
            Awards & Scholarship
        {% endblock %}

        {% block body %}
            {% block navBar %}
                {% include 'dashboard/navbar.html' %}
            {% endblock %}

                        {% block winners %}
                            {% include 'scholarshipsModule/winners.html' with winners=winners %}
                        {% endblock %}
                    </div>
                    {% comment %}The Personal Details end here!{% endcomment %}

                    {% comment %}The Publications starts here!{% endcomment %}
                    <div class="ui tab segment" data-tab="second">
                        {% block invite %}
                            {% include 'scholarshipsModule/invite.html' with release=release ch=ch time=time awards=awards form=form %}
                        {% endblock %} *invite.html is included here*
                    </div>

                    </div>
                </div>
                {% comment %}The right-rail segment ends here!{% endcomment %}

                {% comment %}The right-margin segment!{% endcomment %}
                <div class="column"></div>

            </div>

        {% endblock %}

        {% block javascript %}
            <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
            <script type="text/javascript" src="{% static 'globals/js/datepicker.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/tablesort.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/editProfile.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/modal.js' %}"></script>
            <script>
                    $('.message .close')
              .on('click', function() {
                $(this)
                  .closest('.message')
                  .transition('fade')
                ;
              })
            ;
                **$( function() {
                    $( "#datepicker" ).datepicker(); This is the code that generates the error
                } );**
                </script>
        {% endblock javascript %}

invite.html
        {% load static %}
        {% block winners %}

                        <div class="two fields">
                            <div class="field">
                                <label>Start date</label>

                                    <div class="ui input large left icon">
                                        <i class="calendar icon"></i>
                                        **<input id="datepicker" type="text" name="From" placeholder="YYYY-MM-DD" required>
                                    </div>**

                            </div>

                            <div class="field">
                                <label>End Date</label>

                                    <div class="ui input large left icon">
                                        <i class="calendar icon"></i>
                                        <input type="text" name="To" placeholder="YYYY-MMM-DD" required>
                                    </div>
                                </div>

                    <div class="ui divider"></div>
                </div>
            </div>
        {% endblock %}

This is the datepicker.js fuction which is their in the globals/js folder 

datepicker.js script
        $('.rangestart').calendar({
            type: 'date',
        });
        $('.rangeend').calendar({
            type: 'date',
        });

        $(".date.calendar").calendar({ type: "date" });

```