Some questions about the demo and working

[ArnoMandersTfe]

First of all I looked at a lot of datepickers and I really like this one but the documentation is a little bit unclear for me (maybe skill issue)

https://fymmot.github.io/inclusive-dates/#demo

if deselect show-clear-button this works in the demo above. If I deselect show-today-button this is not visible (or invisible) in the demo above.

show-keyboard-hint changes the wrong setting (formatting)

is there a way to disable the quickButtons (today, yesterday, 10 days)? For example show-quick-buttons

I have difficulty to set the labels. Is it possible to set this inline (not in js/ts). Something like this isn't working

<inclusive-dates
			first-day-of-week="1"
			id="datepicker"
			class="datepicker"
			min-date="2023-01-01"
			max-date="2023-04-20"
			locale="nl-NL"
			show-today-button="false"
			input-should-format="false"
			label="Kies een datum"
			labels="{
 clearButton: 'Clear value!!!',
 monthSelect: 'Select month!!!',
 nextMonthButton: 'Next month!!!',
 nextYearButton: 'Next year!!',
 picker: 'Choose date!!!',
 previousMonthButton: 'Previous month!!!',
 previousYearButton: 'Previous year!!!',
 todayButton: 'Show today !!!',
 yearSelect: 'Select year!!!'
}"
		></inclusive-dates>

And i also miss the Keyboard commands and Open calendar. The last one I see in defaultLabels but I have no idea how to set this because it's a constant

[syradar]

@fymmot I'm also having troubles with the labels. And idea what changed in your fork because they work with wc?

[beakid]

Having the same issue. Ping @fymmot

[beakid]

Any chance anyone can have a look at this? @fymmot

[beakid]

FYI @syradar and @ArnoMandersTfe : I managed to solve this in my Vue app by setting the labels prop manually like this:

Template: <inclusive-dates ref="component" ...

Methods:

    get labels() {
        return {
            selected: 'vald',
            openCalendar: 'Öppna datumväljare',
            calendar: 'Kalender',
            invalidDateError: 'Datumet är felaktigt',
            minDateError: `Välj ett datum efter `,
            maxDateError: `Välj ett datum innan `,
            rangeOutOfBoundsError: `Datumen är inte giltiga`,
            disabledDateError: `Datumet går inte att välja`,
            to: 'till',
            startDate: 'Startdatum',
            clearButton: 'Rensa datum',
            monthSelect: 'Välj månad',
            nextMonthButton: 'Nästkommande månad',
            nextYearButton: 'Nästkommande år',
            picker: 'Välj datum',
            previousMonthButton: 'Föregående månad',
            previousYearButton: 'Föregående år',
            todayButton: 'Visa idag',
            yearSelect: 'Välj år',
            keyboardHint: 'Tangentbordskommandon',
            chooseAsStartDate: 'välj ett startdatum',
            chooseAsEndDate: 'välj ett slutdatum'
        };
    }

mounted() {
        this.$refs.component.inclusiveDatesLabels = this.labels;
        this.$refs.component.inclusiveDatesCalendarLabels = this.labels;
}

Not pretty, but gets the job done.