{"id":19375052,"url":"https://github.com/monim67/django-flatpickr","last_synced_at":"2025-05-07T00:08:08.571Z","repository":{"id":34283415,"uuid":"174275746","full_name":"monim67/django-flatpickr","owner":"monim67","description":"Flatpicker based DatePickerInput, TimePickerInput and DateTimePickerInput with date-range-picker functionality for django \u003e= 2.0","archived":false,"fork":false,"pushed_at":"2024-02-15T09:42:23.000Z","size":228,"stargazers_count":64,"open_issues_count":8,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T00:07:57.041Z","etag":null,"topics":["date-picker","daterangepicker","datetimepicker","django","flatpickr","timepicker"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/django-flatpickr/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monim67.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-07T05:09:39.000Z","updated_at":"2025-03-04T12:31:13.000Z","dependencies_parsed_at":"2023-12-04T07:25:23.859Z","dependency_job_id":"8bb213de-7da9-4404-b01a-6ff736b34525","html_url":"https://github.com/monim67/django-flatpickr","commit_stats":{"total_commits":15,"total_committers":3,"mean_commits":5.0,"dds":0.2666666666666667,"last_synced_commit":"a4960d8c1005bb036a83ab860da03929aba45e72"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monim67%2Fdjango-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monim67%2Fdjango-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monim67%2Fdjango-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monim67%2Fdjango-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monim67","download_url":"https://codeload.github.com/monim67/django-flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788525,"owners_count":21804284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-picker","daterangepicker","datetimepicker","django","flatpickr","timepicker"],"created_at":"2024-11-10T08:36:59.034Z","updated_at":"2025-05-07T00:08:08.543Z","avatar_url":"https://github.com/monim67.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"django-flatpickr\n================\n\nThis django widget contains Date-Picker, Time-Picker, DateTime-Picker input\nwidgets with date-range-picker functionality for django version \u003e= 2.0.\nThe widget implements `flatpickr \u003chttps://github.com/flatpickr/flatpickr\u003e`_\nto display date-pickers in django model forms and custom forms which can be\nconfigured easily for date-range selection. For Bootstrap date-picker see\n`django-bootstrap-datepicker-plus \u003chttps://github.com/monim67/django-bootstrap-datepicker-plus\u003e`_.\n\n\n|  |ci-status| |coverage| |pyversions| |djversions|\n\n|  |flatpickr-red-theme| |flatpickr-default-theme| |flatpickr-dark-theme|\n\n\n\nDemo\n----\n-  `Custom Form \u003cdemo_custom_form_\u003e`_.\n-  `Model Form \u003cdemo_model_form_\u003e`_.\n-  `Generic View (without Model Form) \u003cdemo_generic_view_\u003e`_.\n-  `With django-crispy-forms \u003cdemo_crispy_form_\u003e`_.\n-  `With django-filter \u003cdemo_django_filter_\u003e`_.\n-  `With dynamic formsets \u003cdemo_dynamic_formset_\u003e`_.\n\n\n\nGetting Started\n---------------\n\n\nPrerequisites\n^^^^^^^^^^^^^\n-  Python \u003e= 3.8\n-  Django \u003e= 2.0\n\n\nInstalling\n^^^^^^^^^^\nInstall the PyPI package via pip.\n\n::\n\n    pip install django-flatpickr\n\nAdd ``django_flatpickr`` to ``INSTALLED_APPS`` in your ``settings.py`` file.\n\n.. code:: python\n\n    INSTALLED_APPS = [\n        # Add the following\n        \"django_flatpickr\",\n    ]\n\n\n\nUsage\n-----\n\nThe HTML template must have the following to render the flatpickr widget.\nA better example is `here \u003cfile_custom_form_html_\u003e`_.\n\n.. code:: html\n\n    \u003c!-- File: myapp/custom-form.html --\u003e\n    {{ form.media }}  {# Adds all flatpickr JS/CSS files from CDN #}\n    {{ form.as_p }}   {# Renders the form #}\n\n    \u003cform method=\"post\"\u003e\n      {% csrf_token %}\n      {% bootstrap_form form %}\n    \u003c/form\u003e\n\n\nYou can use it `with generic views without a model form \u003cgeneric_view_block_\u003e`_.\nIt can also be used with custom forms and model forms as below.\n\n\nUsage in Custom Form\n^^^^^^^^^^^^^^^^^^^^\n\n.. code:: python\n\n    # File: forms.py\n    from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput\n    from .models import Event\n    from django import forms\n\n    class ToDoForm(forms.Form):\n        todo = forms.CharField(widget=forms.TextInput())\n        date = forms.DateField(widget=DatePickerInput())\n        time = forms.TimeField(widget=TimePickerInput())\n        datetime = forms.DateTimeField(widget=DateTimePickerInput())\n\n\n    # File: views.py\n    class CustomFormView(generic.FormView):\n        template_name = \"myapp/custom-form.html\"\n        form_class = ToDoForm\n\n\nSee `models.py \u003cfile_models_py_\u003e`_, `forms.py \u003cfile_forms_py_\u003e`_,\n`views.py \u003cfile_views_py_\u003e`_, `custom-form.html \u003cfile_custom_form_html_\u003e`_\nfor more details.\n\nUsage in Model Form\n^^^^^^^^^^^^^^^^^^^^\n\n.. code:: python\n\n    # File: forms.py\n    from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput\n    from .models import Event\n    from django import forms\n\n    class EventForm(forms.ModelForm):\n        class Meta:\n            model = Event\n            fields = [\"name\", \"start_date\", \"start_time\", \"start_datetime\"]\n            widgets = {\n                \"start_date\": DatePickerInput(),\n                \"start_time\": TimePickerInput(),\n                \"start_datetime\": DateTimePickerInput(),\n            }\n\n\n    # File: views.py\n    class UpdateView(generic.edit.UpdateView):\n        model = Event\n        form_class = EventForm\n\n\nSee `models.py \u003cfile_models_py_\u003e`_, `forms.py \u003cfile_forms_py_\u003e`_,\n`views.py \u003cfile_views_py_\u003e`_, `event_form.html \u003cfile_event_form_html_\u003e`_\nfor more details.\n\nImplement date-range-picker\n^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\nDatePickers can be linked together to select a date-range, time-range or\ndate-time-range **without writing a single line of JavaScript**.\n\n.. code:: python\n\n    # File: forms.py\n    from django_flatpickr.widgets import DatePickerInput, TimePickerInput\n    from django import forms\n\n    class EventForm(forms.ModelForm):\n        class Meta:\n            model = Event\n            fields = [\"name\", \"start_date\", \"end_date\", \"start_time\", \"end_time\"]\n            widgets = {\n                \"start_date\": DatePickerInput(),\n                \"end_date\": DatePickerInput(range_from=\"start_date\"),\n                \"start_time\": TimePickerInput(),\n                \"end_time\": TimePickerInput(range_from=\"start_time\"),\n            }\n\n\n\nCustomization\n-------------\n\nTo customize the look and features of flatpickr widget copy the\n`settings block \u003csettings_block_\u003e`_ to your settings.py file and customize it.\nSettings applies globally to all flatpickr widgets used in your site.\n\nYou can set date and event hook options using JavaScript.\n\n.. code:: javascript\n\n    window.djangoFlatpickrOptions = {\n        onChange: function (selectedDates) { console.log(selectedDates) }\n    }\n\n\nCustomize single input\n^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n.. code:: python\n\n    from django_flatpickr.schemas import FlatpickrOptions\n\n    class ToDoForm(forms.Form):\n        todo = forms.CharField(widget=forms.TextInput())\n        start_date = forms.DateField(widget=DatePickerInput(\n            attrs = {\"class\": \"my-custom-class\"}, # input element attributes\n            options=FlatpickrOptions(altFormat=\"m/d/Y\"),\n        ))\n\nSimilarly set date and event hook options using JavaScript.\n\n.. code:: javascript\n\n    window.djangoFlatpickrOptions_start_date = {\n        onChange: function (selectedDates) { console.log(selectedDates) }\n    }\n\n\nLocalization\n^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\nUse locale option, see `available localization options \u003chttps://flatpickr.js.org/localization/\u003e`_.\n\n\nLicense\n-------\n\n- `MIT LICENSE \u003chttps://github.com/monim67/django-flatpickr/blob/master/LICENSE\u003e`_.\n- `CONTRIBUTING \u003chttps://github.com/monim67/django-flatpickr/blob/master/.github/CONTRIBUTING.md\u003e`_.\n- `CODE_OF_CONDUCT \u003chttps://github.com/monim67/django-flatpickr/blob/master/.github/CODE_OF_CONDUCT.md\u003e`_.\n\n\n.. |flatpickr-red-theme| image:: https://cloud.githubusercontent.com/assets/11352152/14549374/3cc01102-028d-11e6-9ff4-0cf208a310c4.PNG\n    :alt: Flatpickr Red Theme\n\n.. |flatpickr-default-theme| image:: https://cloud.githubusercontent.com/assets/11352152/14549370/3cadb750-028d-11e6-818d-c6a1bc6349fc.PNG\n    :alt: Flatpickr Default Theme\n\n.. |flatpickr-dark-theme| image:: https://cloud.githubusercontent.com/assets/11352152/14549372/3cbc8514-028d-11e6-8daf-ec1ba01c9d7e.PNG\n    :alt: Flatpickr Dark Theme\n\n\n.. |ci-status| image:: https://github.com/monim67/django-flatpickr/actions/workflows/build.yml/badge.svg?event=push\n    :target: https://github.com/monim67/django-flatpickr/actions/workflows/build.yml\n    :alt: Build Status\n\n.. |coverage| image:: https://coveralls.io/repos/github/monim67/django-flatpickr/badge.svg?branch=master\n    :target: https://coveralls.io/github/monim67/django-flatpickr?branch=master\n    :alt: Coverage Status\n\n.. |pyversions| image:: https://img.shields.io/pypi/pyversions/django-flatpickr.svg\n    :target: https://pypi.python.org/pypi/django-flatpickr\n    :alt: Python Versions\n\n.. |djversions| image:: https://img.shields.io/pypi/djversions/django-flatpickr.svg\n    :target: https://pypi.python.org/pypi/django-flatpickr\n    :alt: DJango Versions\n\n\n\n.. _demo_custom_form: https://monim67.github.io/django-flatpickr/demo/custom-form.html\n.. _demo_model_form: https://monim67.github.io/django-flatpickr/demo/generic-view-with-model-form-1.html\n.. _demo_generic_view: https://monim67.github.io/django-flatpickr/demo/generic-view.html\n.. _demo_crispy_form: https://monim67.github.io/django-flatpickr/demo/crispy-form.html\n.. _demo_django_filter: https://monim67.github.io/django-flatpickr/demo/django-filter.html\n.. _demo_dynamic_formset: https://monim67.github.io/django-flatpickr/demo/dynamic-formset.html\n\n.. _generic_view_block: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/views.py#L31\n.. _settings_block: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/mysite/settings.py#L143-L200\n\n.. _file_custom_form_html: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/templates/myapp/custom-form.html\n.. _file_event_form_html: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/templates/myapp/event_form.html\n.. _file_forms_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/forms.py\n.. _file_views_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/views.py\n.. _file_models_py: https://github.com/monim67/django-flatpickr/blob/2.0.0/dev/myapp/models.py\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonim67%2Fdjango-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonim67%2Fdjango-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonim67%2Fdjango-flatpickr/lists"}