datepicker

[eatyourpeas]

there is no good datepicker widget and the ones that exist tend to be in js It would be good to create and componentize a nice datepicker as there are multiple fields that use them.

[mbarton]

What would we need above what the native \<input type="date"> gives us?

[eatyourpeas]

The native one is just an input with d/m/yyy - not really a date picker. I thought it might be nice to build one with tailwind and then add that class in the form class.

[mbarton]

The native one is just an input with d/m/yyy - not really a date picker

What specifically do we need on top of the UI that browsers render though? Each browser I've tried has some additional UI.

[eatyourpeas]

I am happy to be guided. I raised this issue because currently the django DateInput widget implements like this (in chrome). Probably this is part of the styling issue.

[dc2007git]

I've managed to load in a datepicker without needing any external dependencies. The only issue is that I can't figure out how to change the input format from DD-MM-YYYY. So far I've changed DATE_INPUT_FORMATS to ["%Y-%m-%d"] in settings.py, and this still isn't working. Stack and the django forums haven't got any solutions that seem to be working either. Is it potentially due to the DD-MM-YYYY being hardcoded when we use the input type='date' tag? Here is what the code looks like so far:

from django import forms
from django.core.exceptions import ValidationError
from ..models import Patient
from ...constants.styles.form_styles import *
from ..general_functions import validate_postcode

class DateInput(forms.DateInput):
    input_type='date'

class PatientForm(forms.ModelForm):
    class Meta:
        model = Patient
        fields = [
            "nhs_number",
            "sex",
            "date_of_birth",
            "postcode",
            "ethnicity",
            "diabetes_type",
            "diagnosis_date",
            "death_date",
            "gp_practice_ods_code",
            "gp_practice_postcode",
        ]
        widgets = {
            "nhs_number": forms.TextInput(attrs={"class": TEXT_INPUT},),
            "sex": forms.Select(attrs={"class": SELECT}),
            "date_of_birth": DateInput(attrs={'class':DATE_INPUT}),
            "postcode": forms.TextInput(attrs={"class": TEXT_INPUT}),
            "ethnicity": forms.Select(attrs={"class": SELECT}),
            "diabetes_type": forms.Select(attrs={"class": SELECT}),
            "diagnosis_date": DateInput(attrs={"class": DATE_INPUT}),
            "death_date": DateInput(attrs={"class": DATE_INPUT}),
            "gp_practice_ods_code": forms.TextInput(attrs={"class": TEXT_INPUT}),
            "gp_practice_postcode": forms.TextInput(attrs={"class": TEXT_INPUT}),
        }

with screenshots of the UI (I am using Chrome as well and this works well for me):

[mbarton]

Hmm yeah the info box in the MDN documentation says that it always displays using the locale of the browser:

The value is normalised to yyyy-mm-dd before being sent to the server though so I think we're fine? Unless it would be confusing to have a different format in the UI compared to the spreadsheet

[eatyourpeas]

This was a requirement of NPDA and is set in the model. I imagine though we could change the format to be something more userfriendly, particularly if it would play nicer with our datepicker