Flatpickr first day of week Monday and shorthandcurrentMonth help

JavaScript
1

I have started to use flatpickr on a form and it’s working but want to add couple of options to it. I want to add the firstDayOfWeek so that Monday is the first day of the week and then want to shorthandCurrentMonth so it shows Jun instead of June

I know the option code I have is sort of working as dateFormat: “d-m-Y”, works if I change the date format and it shows the date format I alter in the dateFormat line but unsure why the firstDayofWeek and shorthandCurrentMonth is not working, below is the code I have

<script>
 var example = flatpickr("#flatpickr", {    
 // A string of characters which are used to define how the date will be displayed in the input box. 
 dateFormat: "d-m-Y",
 // Show the month using the shorthand version.
shorthandCurrentMonth: true,
"locale": {
    "firstDayOfWeek": 1 // start week on Monday
}
});    
</script>

Update: Just got it working by using the cdn files as mentioned on https://www.cssscript.com/flat-style…ker-flatpickr/ as was originally using the code from them files but might be conflicting with something the way I did it originally or coding was possibly missing

2

I see a bug was reported last year https://github.com/flatpickr/flatpickr/issues/1856

Maybe you were using that out-dated version?

3

Yeah think I was as since started using the CDN files, it’s been ok since. I got a couple of new little issues if you got any idea on how to resolve it.

I have noticed a user can enter text/numbers in year field

4

It is helpful to see the html:)

A suggestion

<input type='date'>
5

I tried input=“date” but still the same, think it’s because the input field for the year is pulled in on the javascript cdn file. Below is the code I have

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">

<input name="date" id="flatpickr" placeholder="Choose a Date" class="form-control">

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
var example = flatpickr("#flatpickr", {
minDate: 'today',
defaultDate: 'today',
allowInput: false,
monthSelectorType: "static",
// A string of characters which are used to define how the date will be displayed in the input box. 
dateFormat: "d-m-Y",
// Show the month using the shorthand version.
shorthandCurrentMonth: false,
"locale": {
    "firstDayOfWeek": 1 // start week on Monday
}
});
</script>
6

input type=‘date’, you only appear to have input name=‘date’
You can refer to the link I posted.

7

It don’t do anything unfortunately when I added the input type=“date” on the html line as looks like the input type=“number” is pulled in from the cdn js file for flatpickr

8

I’m sorry Ian, I am not familiar with flatpickr, and would have to look in to it. Unfortunately short for time at the moment, so will have to come back to you later.

Maybe someone else here is able to help in the meantime.

9

It’s ok no worries thank you for the replies etc. appreciate it, I’ll keep looking into it and hopefully find a answer

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.