CODEWITHSUNDEEP
javascriptdjangodatepickerbootstrap-4
Odera Okonkwo
Odera Okonkwo

Reputation: 57

django bootstrap datetimepicker

i am trying to implement the datepicker using the django bootstrap datepicker widget, but the datepicker is not showing on the webpage ("welcome.html) i have passed the form to the views and called the form in the webpage any help will be appreciated

forms.py

class DateForm(forms.Form):
todo = forms.CharField(
    widget=forms.TextInput(attrs={"class":"form-control"}))
date_1=forms.DateField(widget=DatePicker(
    options={"format": "mm/dd/yyyy",
    "autoclose": True }))

def cleandate(self):
    c_date=self.cleaned_data['date_1']
    if c_date < datetime.date.today():
        raise ValidationError(_('date entered has passed'))
    elif c_date > datetime.date.today():
        return date_1
def itamdate(self):
    date_check=calendar.setfirstweekday(calendar.SUNDAY)
    if c_date:
        if date_1==date_check:
            pass
        elif date_1!=date_check:
            raise ValidationError('The Market will not hold today')
        for days in list(range(0,32)):
            for months in list(range(0,13)):
                for years in list(range(2005,2108)):
                    continue

views.py

def imarket(request):
    #CREATES A FORM INSTANCE AND POPULATES USING DATE ENTERED BY THE USER

    if request.method=='POST':
        form = DateForm(request.POST or None)
    #checks validity of the form
        if form.is_valid():
            itamdate=form.cleaned_data['date_1']
            return HttpResponseRedirect(reverse('welcome.html'))
    return render(request, 'welcome.html', {'form':form})

welcome.html

 {%  extends 'base.html' %}
{% load bootstrap %}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
{% block content  %}
<title>welcome</title>

    <form action = "{% url "imarket"}" method = "POST" role="form">
        {% csrf_token %}
        <table>
            {{form|bootstrap_horizontal}}
        </table>
        <div class = "form-group">
            <input type ="submit" value= "CHECK" class="form control"/>
        </div>
    </form>

{% endblock %}

Upvotes: 0

Views: 4822

Answers (3)

vk-code
vk-code

Reputation: 1078

if you are using bootstrap download datepicker from Datetimepicker for Bootstrap 4

then in the head section include

  1. font awesome css
  2. boostrap4 css
  3. bootstrap-datetimepicker.min.css

in the body section include

  1. moment.min.js
  2. bootstrap.min.js
  3. bootstrap-datetimepicker.min.js

define your form

from django import forms

class DateRangeForm(forms.Form):
    start_date = forms.DateTimeField(required=True)
    end_date = forms.DateTimeField(required=True)

in the template render the form

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ dt_range_form }}
    <input class="btn btn-primary btn-sm" type="submit" value="Refresh">
</form>

in the script section add

$("#id_start_date").datetimepicker();

And here you have your datetimepicker! For me Time icon is still not showing up! Need to debug it.

Upvotes: 0

TARUN KUMAR
TARUN KUMAR

Reputation: 141

datepicker should be initialized in the html page.

Upvotes: 0

Odera Okonkwo
Odera Okonkwo

Reputation: 57

The bootstrap datepicker wasn't working , so i added the jquery datepicker to directly to my forms. py using this answer my updated forms.py

class DateForm(forms.Form):
todo = forms.CharField(
    widget=forms.TextInput(attrs={"class":"form-control"}))
date_1=forms.DateField(widget=forms.DateInput(attrs={'class':'datepicker'}))

my updated welcome.html

{%  extends 'base.html' %}
{% load bootstrap %}


{% block content  %}
<title>welcome</title>

    <form action = "{% url "imarket"}" method = "POST" role="form">
        {% csrf_token %}
        <table>
            {{form|bootstrap}}
            <script>
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>
        </table>
        <div class = "form-group">
            <input type ="submit" value= "CHECK" class="form control"/>
        </div>
    </form>

{% endblock %}

Upvotes: 1

Related Questions