Skip to content

A Flask extension for Jquery-ui javascript date picker

License

Notifications You must be signed in to change notification settings

mrf345/flask_datepicker

Repository files navigation

Flask-Datepicker

Latest Release Coverage Percentage
Supported versions

A Flask extension for jQueryUI DatePicker, it makes adding and customizing multiple date pickers simpler and less time consuming.

Install:

- With pip

  • pip install Flask-Datepicker

- From the source:

  • git clone https://github.com/mrf345/flask_datepicker.git
  • cd flask_datepicker
  • python setup.py install

Setup:

- Inside Flask app:

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_datepicker import Datepicker

app = Flask(__name__)
Bootstrap(app)
datepicker = Datepicker(app)

- Inside jinja template:

{% extends 'bootstrap/base.html' %}
{% block scripts %}
  {{ super() }}
  {{ datepicker.loader() }} {# to load jQuery-ui #}
  {{ datepicker.picker(id=".dp") }}
{% endblock %}
{% block content %}
  <form class="verticalform">
    <input type="text" class="form-control dp" />
  </form>
{% endblock %}

Settings:

- Options:

the accepted arguments to be passed to the datepicker.picker():

def picker(id=".datepicker", # identifier will be passed to Jquery to select element
           dateFormat='yy-mm-dd', # can't be explained more !
           maxDate='2018-12-30', # maximum date to select from. Make sure to follow the same format yy-mm-dd
           minDate='2017-12-01', # minimum date
           btnsId='.btnId' # id assigned to instigating buttons if needed
): 
- Themes

datepicker.loader() allows you to select a specific theme of your choice via:

datepicker.loader(theme="base")

If there is not a theme selected, the extension will select a new random theme with each reload of the page to be used. To make it remember the random choice, pass :

datepicker.loader(random_remember=True)

List of available themes :
['base', 'black-tie', 'blitzer' 'cupertino','dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'hot-sneaks', 'humanity', 'le-frog','mint-choc', 'overcast', 'pepper-grinder', 'redmond','smoothness', 'south-street', 'start', 'sunny','swanky-purse', 'trontastic', 'ui-darkness','ui-lightness', 'vader']

- Local source:

by default the extension will load jQueryUI plugin from a remote CDN. Although you can configure that to be locally through passing a list of two files .js and .css into the datepicker module like such:

datepicker(app=app, local=['static/js/jquery-ui.js', 'static/css/jquery-ui.css'])

Credit: