Input field types¶
There are four values for the type
keyword which have an input field:
string
- For text, email, date, file, and other inputs.number
- For number input (including floats).integer
- For integer only number input.boolean
- ForTrue
-False
inputs (checkbox by default).
We’ve excluded array
and object
types as they can’t have input fields.
Inputs for string
type¶
The input fields for string
values can be customized using the format
and widget
keywords.
Available format
values for string
type:
Format |
Description |
---|---|
|
A colour input |
|
A date input |
|
A datetime input. See Datetime field for details. |
|
Alias for |
|
An email input |
|
A password input |
|
A time input |
|
A file input. See Uploading files for usage. |
|
A file input. See Uploading files for usage. |
Available widget
values for string
type:
Widget |
Description |
---|---|
|
A textarea input |
|
A radio input (useful for choices) |
|
A multiselect drowpdown input (useful for choices) |
|
Useful for fetching options via AJAX requests (See usage) |
|
A file input. Useful for overriding |
|
A hidden input |
Examples:
# 1. Text input (default)
{
'type': 'string'
}
# 2. Date input
{
'type': 'string',
'format': 'date'
}
# 3. Email input
{
'type': 'string',
'format': 'email'
}
# 4. Textarea input
{
'type': 'string',
'widget': 'textarea'
}
# ...
Inputs for number
and integer
types¶
The number
and integer
types get an HTML number
input field by default.
These can be customized using the widget
keyword.
Available widget
values for number
& integer
type:
Widget |
Description |
---|---|
|
A range HTML input. |
Inputs for boolean
type¶
The boolean
type gets an HTML checkbox
input. Currently, it can’t be
customized to another input type.
However, you can use choices to display a radio
or select
input with Yes/No options to choose from.
Default values¶
New in version 2.6.
You can specify default initial values for inputs using the default
keyword:
# 1. String input
{
'type': 'string',
'default': 'Hello world'
}
# 2. Boolean
{
'type': 'boolean',
'default': True
}
# 3. Default choice
{
'type': 'string',
'choices': ['Eggs', 'Juice', 'Milk'],
'default': 'Milk'
}
# 4. Default array items
{
'type': 'array',
'items': {
'type': 'string',
'default': 'Hello world' # default value for every new array item
}
}
Readonly inputs¶
New in version 2.6.
You can make inputs uneditable using a readonly
(alias readOnly
) keyword:
# 1. String inputs
{
'type': 'string',
'readonly': True
}
# 2. Array items
{
'type': 'array',
'items': {
'type': 'string',
'readonly': True # all items will be readonly
}
}
Datetime field¶
New in version 2.8.
Usage:
{
'type': 'string',
'format': 'datetime' # or 'date-time'
}
The value will be saved as ISO formatted date, such as: 2022-02-06T15:42:11.000+00:00
.
Timezone conversion¶
When a user selects the time on their browser, it will be interpreted in their operating system’s local timezone. Then, the widget will convert it to UTC for saving in the database.
Also, the widget’s time picker is in 12-hour format, but the final value will be converted to 24-hour format.
Example: Suppose there’s a user whose timezone is +5:30 (Indian Standard Time). If that user inputs
10:00:00 pm
, the widget will convert it to UTC time and 24-hour format.
The final value you’ll get is 16:30:00
.
This timezone conversion only happens on the datetime
field. It doesn’t affect date
field
or time
field.
Formatting datetime¶
The widget keeps the datetime value as an ISO string for JSON compatibility.
However, you may want to format a date value such as to display in the templates in a user-friendly format.
Formatting datetime in templates¶
django-jsonform provides a few template filters to convert the date string to a
datetime
object so you can use it with Django’s date
filter.
You can use the parse_datetime
filter (New in version 2.9) for this:
<!-- template.html -->
{% load django_jsonform %}
{{ date_string | parse_datetime }}
<!-- you can also use it with the date filter -->
{{ date_string | parse_datetime | date:'d M, Y' }}
All the available tags and filters are listed in Template tags and filters document.
Formatting datetime in Python code¶
To format datetime string in Python code, you’ll have to first convert the string
to Python’s datetime
object:
from datetime import datetime
date_string = '2022-02-06T15:42:11.092+00:00' # ISO string
date = datetime.fromisoformat(date_string)
# ... do something with the object ...