Add a date picker to an already existing html form with Django

I have this template that i use for my Django app :

<head>
    <meta charset="utf-8">
    {% load static %}
    <link rel="stylesheet" href="{% static 'GenerateXL/form.css' %}">
    <title>
        app title
    </title>
</head>

<body style="margin-top: 30px; margin-left: 30px;">
    <h1 style="text-align:center"><span style="font-family:Georgia,serif"><span style="color:#006600">
    django app
    </span></span></h1>
    
    <div class="wrapper">
    
    <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    
    <div class="left">
    <h3> import file <h3>
    <br>
    <input type="file"
        title="Upload SPORT"
        name="sport"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <p>
        <input type="submit"
            value="Upload"
            name="sportt"
            style="border: 1px solid green; padding: 5px; border-radius: 2px; cursor: pointer;">
    </p>
    **<!-- I would like to add a datepicker -->**
    </div>
    
    <div class="right">
    
    <h3> Authenticate <h3>
    
    <div class="wrapper">
    
    <div class="left">
    <h5> Connect to proxy : <h5>
    <input type="text"
        title="Id_proxy"
        name="nnn"
        placeholder="nnn"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <input type="password"
        title="Password_proxy"
        name="MDP_proxy"
        placeholder="mot de passe proxy"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    </div>
    
    <div class="right">
    <h5> Connect SP : <h5>
    <input type="text"
        title="Id_Sharepoint"
        name="Login_sp"
        placeholder="Login Sharepoint"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <input type="password"
        title="Password_sharepoint"
        name="MDP_sp"
        placeholder="mot de passe Sharepoint"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    </div>
    
    </div>
    
    </div>
    
    </form>
    </div>

JavaScript
​x
 
<head>
    <meta charset="utf-8">
    {% load static %}
    <link rel="stylesheet" href="{% static 'GenerateXL/form.css' %}">
    <title>
        app title
    </title>
</head>
​
<body style="margin-top: 30px; margin-left: 30px;">
    <h1 style="text-align:center"><span style="font-family:Georgia,serif"><span style="color:#006600">
    django app
    </span></span></h1>
    
    <div class="wrapper">
    
    <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    
    <div class="left">
    <h3> import file <h3>
    <br>
    <input type="file"
        title="Upload SPORT"
        name="sport"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <p>
        <input type="submit"
            value="Upload"
            name="sportt"
            style="border: 1px solid green; padding: 5px; border-radius: 2px; cursor: pointer;">
    </p>
    **<!-- I would like to add a datepicker -->**
    </div>
    
    <div class="right">
    
    <h3> Authenticate <h3>
    
    <div class="wrapper">
    
    <div class="left">
    <h5> Connect to proxy : <h5>
    <input type="text"
        title="Id_proxy"
        name="nnn"
        placeholder="nnn"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <input type="password"
        title="Password_proxy"
        name="MDP_proxy"
        placeholder="mot de passe proxy"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    </div>
    
    <div class="right">
    <h5> Connect SP : <h5>
    <input type="text"
        title="Id_Sharepoint"
        name="Login_sp"
        placeholder="Login Sharepoint"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    <input type="password"
        title="Password_sharepoint"
        name="MDP_sp"
        placeholder="mot de passe Sharepoint"
        style="border: 1px solid black; padding: 5px;"
        required="required">
    </div>
    
    </div>
    
    </div>
    
    </form>
    </div>
​

I want to add a date picker (actually two of them) in the specified location in the code, the dates would then be sent as a variable when user click on submit form. I tried following the walkthrough tutorial for django-bootstrap-datepicker-plus but it just doesn’t fit right for me, i’m not using any generic view. If more details are needed please let me know.

Answer

If you’re looking this up, here’s how i did it (simplest way i could), I used XDSoft DateTimePicker, it is a jQuery plugin.

first include the required css and js files of the plugin to your html by adding the following code inside head tag

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>
</head>

JavaScript
 
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>
</head>
​

then add the datepicker js code where you want to have your datepicker in your html body

<input id="start" type="text" name="debut">
    <script>
        $(function() {
            $("#start").datetimepicker({
            format : 'd/m/Y',
            });
        });
    </script>

JavaScript
 
<input id="start" type="text" name="debut">
    <script>
        $(function() {
            $("#start").datetimepicker({
            format : 'd/m/Y',
            });
        });
    </script>
​

and it’s gonna look like this :

Note : it is interpreted as string, so i personally had to convert it to datetime as i’m working with python.

Advertisement

Answer