Most modern browsers support the new `<input type="date">`, which allows inputting date using a browser-native date picker with built-in validation. This form widget utilizes this feature by setting the input type to "date" and by changing the value formatting as it should be in the ISO format.
See more about `<input type="date">`: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date>
Small fix to make https://www.djangosnippets.org/snippets/1779/ compatible with Django 1.11
To use this you'll also need the javascript from https://www.djangosnippets.org/snippets/1780/
I added an overridden optgroups method that can handle the additional tuple and a couple minor things I gathered while investigating for a fix (a default level_indicator of "+--" and changed paths for the JS files.
All credits goes to @anentropic :-)
I wanted to be able to restyle the inputs, which required having access to each of the select widgets. When used in a form, you can simply iterate over the field to access each element.
Example:
{% for form_field in form.date %}
<div class="select-wrap">
{{ form_field }}
</div>
{% endfor %}
jQuery code for making custom list on Admin page in DateTime widget.
Create new js file in your static folder with this code.
To use add custom js to Admin page like this:
class NiceAdmin(admin.ModelAdmin):
class Media:
js = ('js/adminNice.js',)
This code will change **all** DateTime widgets on selected page.
Custom form widget for rendering an autocomplete (using jQuery UI's autocomplete widget) text input in a template.
This arose from the need to have all fields asking for a state to use autocomplete, so I decided to make this.
A widget for a checkbox multi select, adapted from the RadioSelect widget, which allows you to iterate over each choice in the template rather than outputting the whole thing as a ul in one go.
{{ form.field.label_tag }}
{% for option in form.field %}
<span>{{ option }}</span>
{% endfor %}
Difference from standard Django 1.4 implementation is just structure of list. In django `<input>` elements are *wrapped* by their labels, and look like this::
<ul>
<li><label><input/> Label 1</label>
<li><label><input/> Label 2</label>
</ul>
This widget puts labels *after* input elements::
<ul class="form-button-radio">
<li><input/> <label>Label 1</label>
<li><input/> <label>Label 2</label>
</ul>
It makes possible to define style for both inputs and labels, hiding inputs and making labels look like pressable buttons. No javascript needed, just CSS (see docstring).
To auto-submit the form when pressing a button, JQuery can be added::
<script>
$(document).ready(function() {
$('ul.form-button-radio input[type="radio"]').change(function() {
$(this).parents('form').submit();
});
});
</script>
A Select widget that allows choices to be disabled. Specify `disabled_choices` to indicate which choices should be present in the list, but disabled.
A possible use case for this is a form that displays data that can be edited by privileged user's but only viewed by others.
The problem with Django's default Radio button widget is that it puts the buttons in a vertical format and the documentation is somewhat silent on how to make them horizontal. If you are dealing with a long list of buttons then veritical is probably the way to go but if you are dealing with "YES/NO" situation or any other boolean choice then you will probably want them horizontal.
Basically I just took the code and even the explanation from here:
https://wikis.utexas.edu/display/~bm6432/Django-Modifying+RadioSelect+Widget+to+have+horizontal+buttons
CitySelector is a jquery widget, allowing to pick cities from DB, filled by django_ipgeobase application.
Also it includes widget for django forms, based on mentioned jquery plugin, views and urlconf, required to provide
interaction between widget and DB and middleware, populating request with correspondent location.
Visit https://bitbucket.org/JustDelight/city_selector