Date Format YYYY-MM-DD Can you set the dashes inbetween

Anvil Q&A
1

I have a DatePicker field formatted YYYY-MM-DD

Is it possible to format the input so that when the user enters the date (if they choose to just type it and not use the DatePicker)
that it will input the dashes inbetween.
So, for example:

The user enters
1990
then a dash appears, then they enter
01
then another dash appears
then
01
The final input date would be 1990-01-01
can anyone help?

2

I had a look to se if I could figure it out. I thought you could perhaps tie into the “change” event of the DatePicker field. However this only triggers when pressing enter or selecting a date with the picker, not dynamically as the user types.

I am thinking you might have to use javascript to do this but maybe someone else has a more out of the box way to achieve it.

3

Ive seen som javascript keypess events but you have to set the keypress event on the field and I think it will just come up with an unkown attribute in Anvil

4

You can tie into Javascript keydown events in Anvil using the Javascript bridge. Using that same Javascript bridge you can use Javascript libraries that provide the sort of formatting you want.

None of that may be worth the effort, but here’s some code that shows the general idea of processing Javascript keydown events:

This part would go into the init of a form. In my case, self.description was a TextArea component.

    node = js.get_dom_node(self.description)
    node.addEventListener('keydown', self.keydown)

Also in the form you’d have the handler function:

  def keydown(self, e):
    if e.ctrlKey and e.key == '+':
      self.description.font_size += 1
      e.preventDefault()

    if e.ctrlKey and e.key == '-': 
      if self.description.font_size > 10:
        self.description.font_size -= 1
        
      e.preventDefault()

In my case I wanted the text in the text area to grow or shrink based on keypresses, and prevent the entire page from zooming when they pressed Control+ or Control- in the text area. You could do whatever you wanted based on the keypresses.1

The cool thing about the Javascript bridge is it allows you to tie into Javascript events entirely in Python.

Edit: if you wanted to go the Javascript library route, you could check out Cleave.js - Format input text content when you are typing Integrating a Javascript library is a little more difficult than intercepting keypresses, but it isn’t too bad.

1 Like
5

I think this will do it:

https://anvil-extras.readthedocs.io/en/latest/guides/modules/augmentation.html#keydown-example

Ties in jquery to form events. Quickly hacked the demo provided and it will indeed get the key down events on a date picker:

https://anvil.works/build#clone:XTUOGEA4I7S2BEDL=HWQJH4IA3ZWWOTDWLLBSRHWP

1 Like