|
| 1 | +django-bootstrap3-datetimepicker |
| 2 | +================================ |
| 3 | + |
| 4 | +The JavaScript datetimepicker library is provided by the following |
| 5 | +project: https://github.com/Eonasdan/bootstrap-datetimepicker |
| 6 | + |
| 7 | +It works only with Bootstrap3. If you are using Bootstrap2 in your |
| 8 | +Django project, check out this: |
| 9 | +https://github.com/zokis/django-bootstrap-datetimepicker |
| 10 | + |
| 11 | +Install |
| 12 | +------- |
| 13 | + |
| 14 | +- Run ``pip install django-bootstrap3-datetimepicker`` |
| 15 | +- Add ``'bootstrap3_datetime'`` to your ``INSTALLED_APPS`` |
| 16 | + |
| 17 | +Example |
| 18 | +------- |
| 19 | + |
| 20 | +forms.py |
| 21 | + |
| 22 | + |
| 23 | +:: |
| 24 | + |
| 25 | + from bootstrap3_datetime.widgets import DateTimePicker |
| 26 | + from django import forms |
| 27 | + |
| 28 | + class ToDoForm(forms.Form): |
| 29 | + todo = forms.CharField( |
| 30 | + widget=forms.TextInput(attrs={"class": "form-control"})) |
| 31 | + date = forms.DateField( |
| 32 | + widget=DateTimePicker(options={"format": "yyyy-MM-dd", |
| 33 | + "pickTime": False})) |
| 34 | + reminder = forms.DateTimeField( |
| 35 | + required=False, |
| 36 | + widget=DateTimePicker(options={"format": "yyyy-MM-dd hh:mm", |
| 37 | + "pickSeconds": False})) |
| 38 | + |
| 39 | +The ``options`` will be passed to the JavaScript datetimepicker |
| 40 | +instance. Available ``options`` are explained in the following |
| 41 | +documents: |
| 42 | + |
| 43 | +- http://tarruda.github.io/bootstrap-datetimepicker/ |
| 44 | +- http://www.eyecon.ro/bootstrap-datepicker/ |
| 45 | + |
| 46 | +You don't need to set the ``language`` option, because it will be set |
| 47 | +the current language of the thread automatically. |
| 48 | + |
| 49 | +template.html |
| 50 | + |
| 51 | + |
| 52 | +:: |
| 53 | + |
| 54 | + <!DOCTYPE html> |
| 55 | + <html> |
| 56 | + <head> |
| 57 | + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css"> |
| 58 | + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.css"> |
| 59 | + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script> |
| 60 | + <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script> |
| 61 | + {{ form.media }} |
| 62 | + </head> |
| 63 | + <body> |
| 64 | + <form method="post" role="form"> |
| 65 | + {% for field in form.visible_fields %} |
| 66 | + <div id="div_{{ field.html_name }}" class="form-group{% if field.errors %} has-error{% endif %}"> |
| 67 | + {{ field.label_tag }} |
| 68 | + {{ field }} |
| 69 | + <div class="text-muted pull-right"><small>{{ field.help_text }}</small></div> |
| 70 | + <div class="help-block"> |
| 71 | + {{ field.errors }} |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + {% endfor %} |
| 75 | + {% for hidden in form.hidden_fields %} |
| 76 | + {{ hidden }} |
| 77 | + {% endfor %} |
| 78 | + {% csrf_token %} |
| 79 | + <div class="form-group"> |
| 80 | + <input name="confirm" type="submit" value="Submit" class="btn btn-primary" /> |
| 81 | + </div> |
| 82 | + </form> |
| 83 | + </body> |
| 84 | + </html> |
| 85 | + |
| 86 | +Bootstrap3 and jQuery have to be included along with |
| 87 | +``{{ form.media }}`` |
| 88 | + |
| 89 | +Requirements |
| 90 | +------------ |
| 91 | + |
| 92 | +- Python >= 2.4 |
| 93 | +- Django >= 1.3 |
| 94 | +- Bootstrap >= 3.0 |
| 95 | + |
0 commit comments