setting onClose inside setDefaults is not working

[francsiswanto]

I'm submitting a ... (check one with "x")

[ ] Bug report => search github for a similar issue or PR before submitting
[x] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.6.1
• Vue.js version : 2.5.2
• Browser name and version : Firefox
• This package version : 8.1.2

Current behavior
when I put event hook inside flatpickr.setDefaults like this:

flatpickr.setDefaults({
	altInput: true,
	altFormat: 'd-m-Y',
	dateFormat: 'Y-m-d',
	allowInput: true,
	onClose: function (dates, currentdatestring, picker) {
		if (picker.config.altInput && picker.config.allowInput) {
			picker.setDate(picker.altInput.value, true, picker.config.altFormat)
		}
	}
})

the hook is not working, but if I put this event hook directly on component then is working nicely, like this:

<flat-pickr v-model="FilterDate1" :config="fcon"></flat-pickr>
...
data() {
	return {
		fcon: {
			onClose(dates, currentdatestring, picker) {
				if (picker.config.altInput && picker.config.allowInput) {
					picker.setDate(picker.altInput.value, true, picker.config.altFormat)
				}
			}
		}
	}
},

Expected behavior
Please make it working on setDefault, so I don't have to refer to config in every component.
Thank you.

[ankurk91]

I was able to re-produce it with vue component, the plain js flatpickr does respect the default configs.

https://jsfiddle.net/3du6wh4n/

[francsiswanto]

Thanks for the answer.
Maybe I should explain deeper. My expectation is (using vuejs) calling vueflatpickr as plugin and at the same time I make setDefault. These are what I do:

//main.js
import '@/libs/flatPickr'

//libs/flatPickr/index.js
import Vue from 'vue'
import flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.css'
import 'flatpickr/dist/themes/material_blue.css'
import flatPickr from 'vue-flatpickr-component'
import { Indonesian } from 'flatpickr/dist/l10n/id.js'

flatpickr.localize(Indonesian)
flatpickr.setDefaults(
	{
		altInput: true,
		altFormat: 'd-m-Y',
		dateFormat: 'Y-m-d',
		allowInput: true,
		onClose: function(dates, currentdatestring, picker) {
			console.log('close pickr')
		}
	}
)
Vue.use(flatPickr)

Other defaults (altInput, altFormat, dateFormat and allowInput) is working and respected on every component, except onClose event. Please help me what should I do to configure it properly.
Thank you.

[ankurk91]

Ya, i am aware of the issue, i need to give it more time, i may need to dig it more.

[ankurk91]

@francsiswanto
Hey, i was playing it again, and found out the flatpickr ignores global callbacks when local callbacks are being passed.

https://jsfiddle.net/g4acL78v/4/

The vue component injects its callback (local) which overrides the global one.
I will be fixing this soon.

[ankurk91]

v8.1.5 released

[francsiswanto]

Thank you

[kushalbacancy]

After changing the version, still I am facing the issue. I have combination of Date and time. In order to change the date-time, the Date is working fine but when I change the time, hour change is applying on v-model value but minutes changes are not applying on close.

[ankurk91]

@kushalbacancy

Can u please create a production of the issue and write steps.