Datepicker - Locale - Modify Bootstrap within an Anvil App

Anvil Q&A
1

I am receiving a lot of feedback about the datepicker week beginning on a Sunday. My users are in the UK and want to see the first day of the week on a Monday.

I’ve checked with the Anvil guys and I understand that it is possible to modify the datepicker locally within a specific Anvil app using Javascript.

Having done a bit of Googling, I’ve found the relevant change to the JS:

$('#myid').datetimepicker({
format:'DD-MM-YYYY',
locale:  moment.locale('en', {
    week: { dow: 1 }
}),
});

(source: https://stackoverflow.com/questions/24410685/bootstrap-3-datetimepicker-3-0-0-make-a-week-start-on-monday)

I am unsure on:
A) Where to put/how to call the JS to allow it to overwrite the Anvil set datepicker setup; and
B) How to find the ID of the datepicker element (to replace '#myid').

Any help would be much appreciated.

1 Like
2

This seems to work

<script>
document.addEventListener("DOMContentLoaded", () => {
    moment.updateLocale("en", {
        week: { dow: 1 },
    });
});
</script>

clone:
https://anvil.works/build#clone:JCLW2QKMFL2HWTTI=CVKHQ7DQWJK2YD43NZKK2DJI

You can also do something similar by calling a function:


js.call_js('updateMondays')

class Form1(Form1Template):
   ...


<script>
function updateMondays() {
    moment.updateLocale("en", {
        week: { dow: 1 },
    });
};
</script>
1 Like
3

Thanks @stucork,

I’ve tried your suggested javascript in the head, body and a separate custom html form.
None of them worked.

Where did you place the javascript?

4

I put it in native libraries.

On the phone right now but can share a clone later.

edit:
I’ve amended the code above and added a clone - I had a few versions and must have copied the wrong one!

2 Likes
5

Brilliant.
Thanks @stucork

image

1 Like