Setting Input Value With Alt Input Value

Currently, using your library, I have a working calendar that has an input value and an alt input value. One thing that was asked of me was to have the ability to be able to manually edit the calendar and when you click away from the input box, the calendar will automatically update with the new value.

I am using your example here: https://jsfiddle.net/chmln/qf2b5yLa/2/ to try and get it to work however it does not. I assume it is due to the dates being the different formats and therefore it cannot set one to the other. Is there a built-in way to handle this?

Trying to extract the date with something like this doesn’t work either as it believes that the day and months are the opposite way round: myDate.getFullYear() + "-" + (myDate.getMonth()+1) + "-" + myDate.getDate();

Example code:

datePickerLoad : function(){
    	var optional_config = {
    		dateFormat: "Y-m-d",
    		altInput: true,
    		altFormat: "d/m/Y",
    		allowInput: true,
    		minDate: "1900-01",
    		onChange: function(selDates, dateStr) {
    		  	this._selDateStr = dateStr;
    		},
		onClose: function(selDates, dateStr, instance){
			if (this.config.allowInput && this._input.value && this._input.value !== this._selDateStr) {
			    this.setDate(this.altInput.value, false);
			}
    		}
    	}
    	
    	$(".date-picker").flatpickr(optional_config);
},

• flatpickr version used: v2.5.7
• Browser name and version: Chrome: 57.0.2987.110 (although FireFox seems to have the same behavior)
• OS and version: Ubuntu 16.04

EDIT: I ended up using moment.js to get it working (although matching up the differing date formats was fiddly) but it doesn’t look as nice as letting flatpickr handle it all probably would have which is a shame. So I’ll likely close this issue.

[chmln]

Hey @huseyinham

You got very close to making it work. setDate() takes a third param where you specify the date format of the string you’re passing in.

So all you had to do was

setDate(this.altInput.value, false, this.config.altFormat);

You should also use something like Cleave to enforce the typed format. https://jsfiddle.net/chmln/2r3j0rgs/4/

[devinfd]

I’m facing the same issue that @vlledo mentioned above. Listening for the onChange event to clear the date does not work because onChange does not fire if allowInput: true. Is there are reason that self.clear(); is not called when allowInput: true? Perhaps it should if self._input.value is empty.