Login

Tag "input"

Snippet List

Browser-native date input field

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>

  • forms
  • datefield
  • widget
  • input
Read More

Radio widget with labels after inputs

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>

  • widget
  • label
  • input
  • button
  • reorder
  • radio
  • radio button
Read More

Choices

This allows you to access the choices (and their respective values) you create as a dictionary. It works great within django and it allows you to reference the choices as a dictionary (CHOICES[CHOICE1]) instead of CHOICES[0][0]... it is a tuple... but I mean, come on... what if you change the order? If you need the tuple just call CHOICES.choices and it will return the standard tuple.

  • choice
  • choices
  • input
Read More

Field value as plain text which can't be edited by user

Shows field value as plain text which can't be edited by user. Field value (or key value for foreign keys) is stored in hiddden input. Value of field is stored in hidden input and current value is placed as plain text. User can't change it's value. If field is foreign key then additional attribute 'key' should be set to True (key is stored in hidden field and unicode value is visible): self.fields['my_field'].widget = HiddenInputWithText(attrs={ 'key' : True }) There is one condition: for foreign key field its name have to be same as lowercased model name. Default 'key' value - False is correct for non-foreign key fields: self.fields['my_field'].widget = HiddenInputWithText()

  • forms
  • hidden
  • widget
  • input
Read More

Admin Input Field Character Count via jQuery

Use this code in *change_form.html* in your projects admin templates to add a character counter beside the input field(s) in admin to let users know how many characters they have remaining for a particular input field. The total number of characters allowed is determined by the max_length in your model for the models.CharField you're using this with. This code is designed to add the counter after the input field, but could easily be customized to fit the style of any admin. If the number of characters remaining is 10 or less the background color changes to yellow to visually warn the user. **Usage Examples:** In this example only the input field with id=id_pull_quote will receive the counter: $(document).ready(function() { $("#id_pull_quote").counter(); }); You could also apply the counter to all input fields on a page: $(document).ready(function() { $("form input[@maxlength]").counter(); }); **Note:** *You have to download jQuery to your project and place the appropriate call in order for this to work. The best place to do this is in the extrahead block. I left my call in as an example but your path and file name will probably vary.* Credit for base jQuery code goes to Brad Landis at [bradlis7.com](http://www.bradlis7.com).

  • template
  • javascript
  • admin
  • jquery
  • form
  • input
Read More

Integer Currency Input

This accepts values such as $1,000,000 and stores them to the database as integers. It also re-renders them to the screen using the django.contrib.humanize.intcomma method which takes 1000000 and turns it into 1,000,000. Useful for large currency fields where the decimals aren't really necessary.

  • newforms
  • currency
  • field
  • integer
  • input
Read More

(en-US) Humanized Decimal Field

Simple DecimalField class extension that automatically adds formatting and validation for comma-separated "decimals". Works wonderfully for price fields. Could be extended to strip dollar signs or to be locale-agnostic.

  • form
  • humanize
  • field
  • comma
  • decimal
  • thousands
  • separator
  • input
Read More

9 snippets posted so far.