Skip to content

Commit

Permalink
[skip ci] Update README with v2 changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@monim67
monim67 committed Oct 23, 2022
1 parent 5ff2f4d commit 743acac
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 58 deletions.
123 changes: 66 additions & 57 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ configured easily for date-range selection. For Bootstrap date-picker see
`django-bootstrap-datepicker-plus <https://github.com/monim67/django-bootstrap-datepicker-plus>`_.


| |ci-status| |coverage.io|
| |pyversions| |djversions| |pypi-version|
| |format| |status| |license|
| |ci-status| |coverage| |pyversions| |djversions|
| |flatpickr-red-theme| |flatpickr-default-theme| |flatpickr-dark-theme|
Expand All @@ -22,6 +20,9 @@ Demo
- `Custom Form <demo_custom_form_>`_.
- `Model Form <demo_model_form_>`_.
- `Generic View (without Model Form) <demo_generic_view_>`_.
- `With django-crispy-forms <demo_crispy_form_>`_.
- `With django-filter <demo_django_filter_>`_.
- `With dynamic formsets <demo_dynamic_formset_>`_.



Expand All @@ -31,7 +32,7 @@ Getting Started

Prerequisites
^^^^^^^^^^^^^
- Python >= 3.4
- Python >= 3.7
- Django >= 2.0


Expand All @@ -43,13 +44,13 @@ Install the PyPI package via pip.

pip install django-flatpickr

Add ``flatpickr`` to ``INSTALLED_APPS`` in your ``settings.py`` file.
Add ``django_flatpickr`` to ``INSTALLED_APPS`` in your ``settings.py`` file.

.. code:: python
INSTALLED_APPS = [
# Add the following
'flatpickr',
"django_flatpickr",
]
Expand All @@ -62,7 +63,7 @@ A better example is `here <file_custom_form_html_>`_.

.. code:: html

<!-- File: todo.html -->
<!-- File: myapp/custom-form.html -->
{{ form.media }} {# Adds all flatpickr JS/CSS files from CDN #}
{{ form.as_p }} {# Renders the form #}

Expand All @@ -77,7 +78,7 @@ Usage in Custom Form
.. code:: python
# File: forms.py
from flatpickr import DatePickerInput, TimePickerInput, DateTimePickerInput
from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput
from .models import Event
from django import forms
Expand All @@ -90,7 +91,7 @@ Usage in Custom Form
# File: views.py
class CustomFormView(generic.FormView):
template_name = 'myapp/custom-form.html'
template_name = "myapp/custom-form.html"
form_class = ToDoForm
Expand All @@ -104,18 +105,18 @@ Usage in Model Form
.. code:: python
# File: forms.py
from flatpickr import DatePickerInput, TimePickerInput, DateTimePickerInput
from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput
from .models import Event
from django import forms
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['name', 'start_date', 'start_time', 'start_datetime']
fields = ["name", "start_date", "start_time", "start_datetime"]
widgets = {
'start_date': DatePickerInput(),
'start_time': TimePickerInput(),
'start_datetime': DateTimePickerInput(),
"start_date": DatePickerInput(),
"start_time": TimePickerInput(),
"start_datetime": DateTimePickerInput(),
}
Expand All @@ -138,18 +139,18 @@ date-time-range **without writing a single line of JavaScript**.
.. code:: python
# File: forms.py
from flatpickr import DatePickerInput, TimePickerInput
from django_flatpickr.widgets import DatePickerInput, TimePickerInput
from django import forms
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['name', 'start_date', 'end_date', 'start_time', 'end_time']
fields = ["name", "start_date", "end_date", "start_time", "end_time"]
widgets = {
'start_date':DatePickerInput().start_of('event days'),
'end_date':DatePickerInput().end_of('event days'),
'start_time':TimePickerInput().start_of('party time'),
'end_time':TimePickerInput().end_of('party time'),
"start_date": DatePickerInput(),
"end_date": DatePickerInput(range_from="start_date"),
"start_time": TimePickerInput(),
"end_time": TimePickerInput(range_from="start_time"),
}
Expand All @@ -161,29 +162,50 @@ To customize the look and features of flatpickr widget copy the
`settings block <settings_block_>`_ to your settings.py file and customize it.
Settings applies globally to all flatpickr widgets used in your site.

If you need to customize a single flatpickr widget you can do it as follows:
You can set date and event hook options using JavaScript.

.. code:: javascript
window.djangoFlatpickrOptions = {
onChange: function (selectedDates) { console.log(selectedDates) }
}
Customize single input
^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code:: python
from django_flatpickr.schemas import FlatpickrOptions
class ToDoForm(forms.Form):
todo = forms.CharField(widget=forms.TextInput())
date = forms.DateField(widget=DatePickerInput(
attrs = { # input element attributes
"class": "my-custom-class",
},
options = { # flatpickr options
"dateFormat": "m/d/Y",
}
start_date = forms.DateField(widget=DatePickerInput(
attrs = {"class": "my-custom-class"}, # input element attributes
options=FlatpickrOptions(altFormat="m/d/Y"),
))
Similarly set date and event hook options using JavaScript.

.. code:: javascript
window.djangoFlatpickrOptions_start_date = {
onChange: function (selectedDates) { console.log(selectedDates) }
}
Localization
^^^^^^^^^^^^^^^^^^^^^^^^^^^

Use locale option, see `available localization options <https://flatpickr.js.org/localization/>`_.


License
-------

- `MIT LICENSE <https://github.com/monim67/django-flatpickr/blob/master/LICENSE>`_.
- `CONTRIBUTING <https://github.com/monim67/django-flatpickr/blob/master/.github/CONTRIBUTING.md>`_.
- `CODE_OF_CONDUCT <https://github.com/monim67/django-flatpickr/blob/master/.github/CODE_OF_CONDUCT.md>`_.
- `MIT LICENSE <https://github.com/monim67/django-flatpickr/blob/master/LICENSE>`_.
- `CONTRIBUTING <https://github.com/monim67/django-flatpickr/blob/master/.github/CONTRIBUTING.md>`_.
- `CODE_OF_CONDUCT <https://github.com/monim67/django-flatpickr/blob/master/.github/CODE_OF_CONDUCT.md>`_.


.. |flatpickr-red-theme| image:: https://cloud.githubusercontent.com/assets/11352152/14549374/3cc01102-028d-11e6-9ff4-0cf208a310c4.PNG
Expand All @@ -200,7 +222,7 @@ License
:target: https://travis-ci.org/monim67/django-flatpickr
:alt: Build Status

.. |coverage.io| image:: https://coveralls.io/repos/github/monim67/django-flatpickr/badge.svg?branch=master
.. |coverage| image:: https://coveralls.io/repos/github/monim67/django-flatpickr/badge.svg?branch=master
:target: https://coveralls.io/github/monim67/django-flatpickr?branch=master
:alt: Coverage Status

Expand All @@ -212,33 +234,20 @@ License
:target: https://pypi.python.org/pypi/django-flatpickr
:alt: DJango Versions

.. |pypi-version| image:: https://badge.fury.io/py/django-flatpickr.svg
:target: https://pypi.python.org/pypi/django-flatpickr
:alt: PyPI version

.. |format| image:: https://img.shields.io/pypi/format/django-flatpickr.svg
:target: https://pypi.python.org/pypi/django-flatpickr
:alt: Format

.. |status| image:: https://img.shields.io/pypi/status/django-flatpickr.svg
:target: https://pypi.python.org/pypi/django-flatpickr
:alt: Status

.. |license| image:: https://img.shields.io/pypi/l/django-flatpickr.svg
:target: https://pypi.python.org/pypi/django-flatpickr
:alt: Licence


.. _demo_custom_form: https://monim67.github.io/django-flatpickr/demo/custom-form.html
.. _demo_model_form: https://monim67.github.io/django-flatpickr/demo/generic-view-with-model-form-1.html
.. _demo_generic_view: https://monim67.github.io/django-flatpickr/demo/generic-view.html

.. _generic_view_block: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/views.py#L11
.. _settings_block: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/mysite/settings.py#L134-L176

.. _file_custom_form_html: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/templates/myapp/custom-form.html
.. _file_event_form_html: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/templates/myapp/event_form.html
.. _file_forms_py: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/forms.py
.. _file_views_py: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/views.py
.. _file_models_py: https://github.com/monim67/django-flatpickr/blob/v1.0.0/dev/myapp/models.py

.. _demo_crispy_form: https://monim67.github.io/django-flatpickr/demo/crispy-form.html
.. _demo_django_filter: https://monim67.github.io/django-flatpickr/demo/django-filter.html
.. _demo_dynamic_formset: https://monim67.github.io/django-flatpickr/demo/dynamic-formset.html

.. _generic_view_block: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/views.py#L31
.. _settings_block: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/mysite/settings.py#L143-L200

.. _file_custom_form_html: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/templates/myapp/custom-form.html
.. _file_event_form_html: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/templates/myapp/event_form.html
.. _file_forms_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/forms.py
.. _file_views_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/views.py
.. _file_models_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/models.py
2 changes: 1 addition & 1 deletion dev/mysite/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
# You can set date and event hook options using JavaScript, usage in README.
#
# HTML template to render the flatpickr input
# Example: https://github.com/monim67/django-flatpickr/blob/v2.0.0/dev/myapp/templates/myapp/custom-flatpickr-input.html
# Example: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/templates/myapp/custom-flatpickr-input.html
# "template_name": "your-app/custom-flatpickr-input.html",
#
# Specify CDN roots. Choose where from static JS/CSS are served.
Expand Down

0 comments on commit 743acac

Please sign in to comment.