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 - For True - 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
`color`	A colour input
`date`	A date input
`date-time`	A datetime input. See Datetime field for details.
`datetime`	Alias for `date-time`
`email`	An email input
`password`	A password input
`time`	A time input
`data-url`	A file input. See Uploading files for usage.
`file-url`	A file input. See Uploading files for usage.
`uri`	A URL input for absolute links only.
`uri-reference`	A URL input for absolute as well as relative links.

Available widget values for string type:

Widget	Description
`textarea`	A textarea input
`radio`	A radio input (useful for choices)
`autocomplete`	Useful for fetching options via AJAX requests (See usage)
`fileinput`	A file input. Useful for overriding `file-url` input (See usage)
`hidden`	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
`range`	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.

Input for `const` keyword¶

New in version 2.20.

The const keyword gets a readonly input. It can also be hidden by using a hidden widget.

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
    }
}

Multiselect inputs¶

Multiselect inputs are only supported on array type.

Available multiselect widgets:

Widget	Description
`multiselect`	A multiselect drowpdown input (useful for choices)
`multiselect-autocomplete`	A multiselect autocomplete input (See usage)

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 ...