Date picker language and Monday as first day of Week

Hello dear Forummers,

What I’m trying to do:

  1. I am trying to translate Date picker Form from English to local languages
  2. I want to put Monday first for Weekdays - now is shown Sunday as first day of the week

What I’ve tried and what’s not working:
I changed system settings of my computer and browser - it is working

Thank you in advance for help !

Anvil’s datepicker uses a javascript package called moment to handle the dates

To make the first day of the week Monday you can do the following:

from anvil.js.window import moment

moment.updateLocale("en", { "week": {
  "dow": 1, # First day of week is Monday
}})

I can’t guarantee that this will always be the case, so you might want to wrap this in a try except block.

Re changing the to local language this post may be helpful:

But, moment needs to know the target language and have access to the locale file for that target language.

You also might find this custom component helpful since it uses the native browser datetime input, which will likely be localized:

Thank you Stu

I put this code to the Form code

from anvil.js.window import moment

moment.updateLocale(“en”, { “week”: {
“dow”: 1, # First day of week is Monday
}})

but no any changes

May be I must put it to another place?

The best place is probably a startup form or startup module at the top of the file:

https://anvil.works/build#clone:LMU2RRFYS6ZGXMZ2=GRH7H5TSAXHXPWODAFFD34N2

Monday is done by putting on Start Page !
thank you very much !

but in localization I see there is link
https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/de.js

How and where to create the link like this for another language?

You can see the locale files here: moment CDN by jsDelivr - A CDN for npm and GitHub
Choose your preferred language

I would probably adjust the code in the post above

In native libraries you can put the following script tag in:

<!-- Adjust the extension to your preferred language https://www.jsdelivr.com/package/npm/moment?path=locale -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/de.js" defer></script>

making sure to add the defer keyword

Then in the python module you can do


from anvil.js.window import moment
locale = moment.locale('de') # change 'de' to your preferred language

You may find you don’t need the code to change it to Monday - it depends on the locale.

Great !
I just put on Start-ups Form only this code replaced with required local lang:

from anvil.js.window import moment, document
script = document.createElement(‘script’)
script.src = “https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/de.js
document.head.appendChild(script)
locale = moment.locale(‘de’)

And it is working great immediately !

Thank you very much Stu !