{% extends "pxy_dashboard/partials/base.html" %} {% load static %} {% block title %}Form Advanced{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "pxy_dashboard/partials/page-title.html" with pagetitle="Forms" title="Form Advanced" %} {% endblock pagetitle %} {% block content %}

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Single Select

Select2 can take a regular select box like this...

Multiple Select

Select2 can take a regular select box like this...

Date Range Picker

A JavaScript component for choosing date ranges, dates and times.

 

Flatpickr - Date picker

A lightweight and powerful datetimepicker

Flatpickr - Time Picker

A lightweight and powerful datetimepicker

Input Masks

A jQuery Plugin to make masks on form fields and HTML elements.

e.g "DD/MM/YYYY"
e.g "HH:MM:SS"
e.g "DD/MM/YYYY HH:MM:SS"
e.g "xxxxx-xxx"
e.g "x-xx-xx-xx"
e.g "Your money"
e.g "#.##0,00"
e.g "xxxx-xxxx"
e.g "(xx) xxxx-xxxx"
e.g "(xxx) xxx-xxxx"
e.g "(xx) xxxxx-xxxx"
e.g "xxx.xxx.xxxx-xx"
e.g "xx.xxx.xxx/xxxx-xx"
e.g "xxx.xxx.xxx.xxx"

Bootstrap Touchspin

A mobile and touch friendly input spinner component for Bootstrap. Specify attribute data-toggle="touchspin" and your input would be conveterted into touch friendly spinner.

Bootstrap Maxlength

Uses the HTML5 attribute "maxlength" to work. Just specify data-toggle="maxlength" attribute to have maxlength indication on any input.

The badge will show up by default when the remaining chars are 10 or less:

Satrt displaying the indication when reached to some threshhold. Specift the data attribute threshold. E.g. data-threshold="12"

All you need to do is specify the data attribute placement. The possible positions are left, top, right, bottom-right, top-right, top-left, bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'. E.g. data-placement="top"

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

Timepicker

Easily select a time for a text input using your mouse or keyboards arrow keys. Specify attribute data-toggle="timepicker" and you would have nice timepicker input element.

Typeahead

Typeahead.js %} is a fast and fully-featured autocomplete library.

{% endblock content %} {% block extra_js %} {% endblock extra_js %}