Using Django time date widgets in custom form

Question

How can I use the nifty JavaScript date and time widgets that the default admin uses with my custom view?

I have looked through the Django forms documentation, and it briefly mentions django.contrib.admin.widgets, but I don't know how to use it?

Here is my template that I want it applied on.

<form action="." method="POST">
    <table>
        {% for f in form %}
           <tr> <td> {{ f.name }}</td> <td>{{ f }}</td> </tr>
        {% endfor %}
    </table>
    <input type="submit" name="submit" value="Add Product">
</form>

Also, I think it should be noted that I haven't really written a view up myself for this form, I am using a generic view. Here is the entry from the url.py:

(r'^admin/products/add/$', create_object, {'model': Product, 'post_save_redirect': ''}),

And I am relevantly new to the whole Django/MVC/MTV thing, so please go easy...

User · Answer

Yep  I ended up overriding the  admin jsi18n  url   Here s what I added in my urls py   Make sure it s above the  admin  url       r  admin jsi18n   i18n javascript     And here is the i18n javascript function I created   from django contrib import admin def i18n javascript request     return admin site i18n javascript request

User · Answer

The growing complexity of this answer over time  and the many hacks required  probably ought to caution you against doing this at all  It s relying on undocumented internal implementation details of the admin  is likely to break again in future versions of Django  and is no easier to implement than just finding another JS calendar widget and using that   That said  here s what you have to do if you re determined to make this work    Define your own ModelForm subclass for your model  best to put it in forms py in your app   and tell it to use the AdminDateWidget   AdminTimeWidget   AdminSplitDateTime  replace  mydate  etc with the proper field names from your model    from django import forms from my app models import Product from django contrib admin import widgets                                         class ProductForm forms ModelForm       class Meta          model   Product     def   init   self   args    kwargs           super ProductForm  self    init    args    kwargs          self fields  mydate   widget   widgets AdminDateWidget           self fields  mytime   widget   widgets AdminTimeWidget           self fields  mydatetime   widget   widgets AdminSplitDateTime    Change your URLconf to pass  form class   ProductForm instead of  model   Product to the generic create object view  that ll mean  from my app forms import ProductForm  instead of  from my app models import Product   of course   In the head of your template  include    form media    to output the links to the Javascript files  And the hacky part  the admin date time widgets presume that the i18n JS stuff has been loaded  and also require core js  but don t provide either one automatically   So in your template above    form media    you ll need    lt script type  text javascript  src   my admin jsi18n   gt  lt  script gt   lt script type  text javascript  src   media admin js core js  gt  lt  script gt    You may also wish to use the following admin CSS  thanks Alex for mentioning this     lt link rel  stylesheet  type  text css  href   media admin css forms css   gt   lt link rel  stylesheet  type  text css  href   media admin css base css   gt   lt link rel  stylesheet  type  text css  href   media admin css global css   gt   lt link rel  stylesheet  type  text css  href   media admin css widgets css   gt     This implies that Django s admin media  ADMIN MEDIA PREFIX  is at  media admin  - you can change that for your setup   Ideally you d use a context processor to pass this values to your template instead of hardcoding it  but that s beyond the scope of this question   This also requires that the URL  my admin jsi18n  be manually wired up to the django views i18n javascript catalog view  or null javascript catalog if you aren t using I18N    You have to do this yourself instead of going through the admin application so it s accessible regardless of whether you re logged into the admin  thanks Jeremy for pointing this out    Sample code for your URLconf    r  my admin jsi18n    django views i18n javascript catalog      Lastly  if you are using Django 1 2 or later  you need some additional code in your template to help the widgets find their media      load adminmedia       At the top of the template         In the head section of the template      lt script type  text javascript  gt  window   admin media prefix         filter escapejs      admin media prefix      endfilter       lt  script gt    Thanks lupefiasco for this addition

User · Answer

What about just assigning a class to your widget and then binding that class to the JQuery datepicker?

Django forms.py:

class MyForm(forms.ModelForm):

  class Meta:
    model = MyModel

  def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['my_date_field'].widget.attrs['class'] = 'datepicker'

And some JavaScript for the template:

  $(".datepicker").datepicker();

User · Answer

Here s another 2020 solution  inspired by  Sandeep s  Using the MinimalSplitDateTimeMultiWidget found in this gist  in our Form as below  we can use modern browser date and time selectors  via eg  type    date    We don t need any JS  class EditAssessmentBaseForm forms ModelForm       class Meta          model   Assessment         fields      all         begin   DateTimeField widget MinimalSplitDateTimeMultiWidget

User · Answer

I use this  it s great  but I have 2 problems with the template    I see the calendar icons twice for every filed in template   And for TimeField I have  Enter a valid date       models py  from django db import models     name models CharField max length 100      create date models DateField blank True      start time models TimeField blank False      end time models TimeField blank False    forms py  from django import forms from  models import Guide from django contrib admin import widgets  class GuideForm forms ModelForm       start time   forms DateField widget widgets AdminTimeWidget      end time   forms DateField widget widgets AdminTimeWidget      create date   forms DateField widget widgets AdminDateWidget      class Meta          model Guide         fields   name   categorie   thumb

User · Answer

My Django Setup   1 11 Bootstrap  3 3 7  Since none of the answers are completely clear  I am sharing my template code which presents no errors at all    Top Half of template      extends  base html        load static       load i18n        block head         lt title gt Add Interview lt  title gt     endblock        block content      lt script type  text javascript  src     url  javascript-catalog      gt  lt  script gt   lt script type  text javascript  src     static  admin js core js      gt  lt  script gt   lt link rel  stylesheet  type  text css  href     static  admin css forms css       gt   lt link rel  stylesheet  type  text css  href     static  admin css widgets css       gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css   gt   lt script type  text javascript  src     static  js jquery js      gt  lt  script gt    Bottom Half    lt script type  text javascript  src   admin jsi18n   gt  lt  script gt   lt script type  text javascript  src     static  admin js vendor jquery jquery min js      gt  lt  script gt   lt script type  text javascript  src     static  admin js jquery init js      gt  lt  script gt   lt script type  text javascript  src     static  admin js actions min js      gt  lt  script gt     endblock

User · Answer

Complementing the answer by Carl Meyer  I would like to comment that you need to put that header in some valid block  inside the header  within your template      block extra head      lt link rel  stylesheet  type  text css  href   media admin css forms css   gt   lt link rel  stylesheet  type  text css  href   media admin css base css   gt   lt link rel  stylesheet  type  text css  href   media admin css global css   gt   lt link rel  stylesheet  type  text css  href   media admin css widgets css   gt    lt script type  text javascript  src   admin jsi18n   gt  lt  script gt   lt script type  text javascript  src   media admin js core js  gt  lt  script gt   lt script type  text javascript  src   media admin js admin RelatedObjectLookups js  gt  lt  script gt      form media        endblock

User · Answer

As the solution is hackish  I think using your own date time widget with some JavaScript is more feasible

User · Answer

The below will also work as a last resort if the above failed

class PaymentsForm(forms.ModelForm):
    class Meta:
        model = Payments

    def __init__(self, *args, **kwargs):
        super(PaymentsForm, self).__init__(*args, **kwargs)
        self.fields['date'].widget = SelectDateWidget()

Same as

class PaymentsForm(forms.ModelForm):
    date = forms.DateField(widget=SelectDateWidget())

    class Meta:
        model = Payments

put this in your forms.py from django.forms.extras.widgets import SelectDateWidget

User · Answer

I find myself referencing this post a lot, and found that the documentation defines a slightly less hacky way to override default widgets.

(No need to override the ModelForm's __init__ method)

However, you still need to wire your JS and CSS appropriately as Carl mentions.

forms.py

from django import forms
from my_app.models import Product
from django.contrib.admin import widgets                                       


class ProductForm(forms.ModelForm):
    mydate = forms.DateField(widget=widgets.AdminDateWidget)
    mytime = forms.TimeField(widget=widgets.AdminTimeWidget)
    mydatetime = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)

    class Meta:
        model = Product

Reference Field Types to find the default form fields.

User · Answer

In Django 10  myproject urls py  at the beginning of urlpatterns    from django views i18n import JavaScriptCatalog  urlpatterns         url r  jsi18n     JavaScriptCatalog as view    name  javascript-catalog             In my template html      load staticfiles          lt script src     static  js jquery-2 2 3 min js      gt  lt  script gt       lt script src     static  js bootstrap min js      gt  lt  script gt         Loading internazionalization for js           load i18n admin modify         lt script type  text javascript  src     url  javascript-catalog      gt  lt  script gt       lt script type  text javascript  src     static   admin js jquery init js      gt  lt  script gt        lt link rel  stylesheet  type  text css  href     static   admin css base css      gt       lt link rel  stylesheet  type  text css  href     static   admin css forms css      gt       lt link rel  stylesheet  type  text css  href     static   admin css login css      gt       lt link rel  stylesheet  type  text css  href     static   admin css widgets css      gt          lt script type  text javascript  src     static   admin js core js      gt  lt  script gt       lt script type  text javascript  src     static   admin js SelectFilter2 js      gt  lt  script gt       lt script type  text javascript  src     static   admin js admin RelatedObjectLookups js      gt  lt  script gt       lt script type  text javascript  src     static   admin js actions js      gt  lt  script gt       lt script type  text javascript  src     static   admin js calendar js      gt  lt  script gt       lt script type  text javascript  src     static   admin js admin DateTimeShortcuts js      gt  lt  script gt

User · Answer

My head code for 1 4 version some new and some removed      block extrahead      lt link rel  stylesheet  type  text css  href     STATIC URL   admin css forms css   gt   lt link rel  stylesheet  type  text css  href     STATIC URL   admin css base css   gt   lt link rel  stylesheet  type  text css  href     STATIC URL   admin css global css   gt   lt link rel  stylesheet  type  text css  href     STATIC URL   admin css widgets css   gt    lt script type  text javascript  src   admin jsi18n   gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js core js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js admin RelatedObjectLookups js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js jquery js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js jquery init js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js actions js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js calendar js  gt  lt  script gt   lt script type  text javascript  src     STATIC URL   admin js admin DateTimeShortcuts js  gt  lt  script gt      endblock

User · Answer

For Django    2 0     Note  Using admin widgets for date-time fields is not a good idea as admin style-sheets can conflict with your site style-sheets in case you are using bootstrap or any other CSS frameworks  If you are building your site on bootstrap use my bootstrap-datepicker widget django-bootstrap-datepicker-plus    Step 1  Add javascript-catalog URL to your project s  not app s  urls py file   from django views i18n import JavaScriptCatalog  urlpatterns         path  jsi18n   JavaScriptCatalog as view    name  javascript-catalog        Step 2  Add required JavaScript CSS resources to your template    lt script type  text javascript  src     url  javascript-catalog      gt  lt  script gt   lt script type  text javascript  src     static   admin js core js      gt  lt  script gt   lt link rel  stylesheet  type  text css  href     static   admin css widgets css      gt   lt style gt  calendar gt table gt caption caption-side unset  lt  style gt  lt  --caption fix for bootstrap4-- gt     form media              Form required JS and CSS      Step 3  Use admin widgets for date-time input fields in your forms py   from django contrib admin import widgets from  models import Product  class ProductCreateForm forms ModelForm       class Meta          model   Product         fields     name    publish date    publish time    publish datetime           widgets                  publish date   widgets AdminDateWidget               publish time   widgets AdminTimeWidget               publish datetime   widgets AdminSplitDateTime

User · Answer

June 3  2020  All answers didn t worked  you can try this solution I used  Just for TimeField   Use simple Charfield for time fields  start and end in this example  in forms   forms py   we can use Form or ModelForm here   class TimeSlotForm forms ModelForm       start   forms CharField widget forms TextInput attrs   placeholder    HH MM         end   forms CharField widget forms TextInput attrs   placeholder    HH MM          class Meta          model   TimeSlots         fields     start    end    provider     Convert string input into time object in views   import datetime def slots        if request method     POST           form   create form request POST          if form is valid                                slot   form save commit False              start   form cleaned data  start               end   form cleaned data  end               start   datetime datetime strptime start    H  M   time               end   datetime datetime strptime end    H  M   time               slot start   start             slot end   end             slot save

User · Answer

Starting in Django 1 2 RC1  if you re using the Django admin date picker widge trick  the following has to be added to your template  or you ll see the calendar icon url being referenced through   missing-admin-media-prefix        load adminmedia       At the top of the template         In the head section of the template      lt script type  text javascript  gt  window   admin media prefix         filter escapejs      admin media prefix      endfilter       lt  script gt

User · Answer

Updated solution and workaround for SplitDateTime with required False   forms py  from django import forms  class SplitDateTimeJSField forms SplitDateTimeField       def   init   self   args    kwargs           super SplitDateTimeJSField  self    init    args    kwargs          self widget widgets 0  attrs     class    vDateField           self widget widgets 1  attrs     class    vTimeField       class AnyFormOrModelForm forms Form       date   forms DateField widget forms TextInput attrs   class   vDateField         time   forms TimeField widget forms TextInput attrs   class   vTimeField         timestamp   SplitDateTimeJSField required False     form html   lt script type  text javascript  src   admin jsi18n   gt  lt  script gt   lt script type  text javascript  src   admin media js core js  gt  lt  script gt   lt script type  text javascript  src   admin media js calendar js  gt  lt  script gt   lt script type  text javascript  src   admin media js admin DateTimeShortcuts js  gt  lt  script gt    urls py   r  admin jsi18n     django views i18n javascript catalog

[python] Using Django time/date widgets in custom form

The answer is

For Django >= 2.0

Examples related to python

Examples related to django

Tags