Flatpickr calendar show wrong default date - date

I have facetwp installed in wordpress and after the search was made, the search widget doesn't show the correct date as per selected before search
how to override this display issue (selected date) by javascript?
To view this problem in action : https://www.sweetpictures.com.my/product-category/photographers/?fwp_photo=2018-01-31%2C2018-01-31%2C1&fwp_productcategory=ampang&fwp_expertise=wedding-reception
Supposed the calendar picker selected date was 31st jan 2018
but instead it shows Aug 20th 2018
Kind help and assistance appreciated

Use the documentation of Flatpickr to set the default date to the one you want : https://chmln.github.io/flatpickr/examples/#supplying-dates-for-flatpickr
That way you can add the following parameters to you flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y'
})
If this is not working, try setting the input to the good date with the onReady function in the flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y',
onReady: function (selectedDates, dateStr, instance) {
$('#your-date-element input').val(
instance.formatDate(new Date(), 'd/m/Y')
)
},
})

Related

A date picker without year

I want to modify the jqueryui date picker to work and look like the one in this photo. How to do it?
The JqueryUI Date Picker documentation mentions a setting called yearRange that can be used to do this.
The value is supposed to be the min and max year allowed.
So, for your usecase, only allow current year in the range.
$( ".my-date-selector" ).datepicker({
yearRange: "2021:2021"
});
or a future proof answer will be
let year = new Date().getFullYear();
$( ".my-date-selector" ).datepicker({
yearRange: `${year}:${year}`
});

Datepicker materialize disable day by time

Hello i am new in frontEnd, can you help me with some issue, i have create a materialize datepicker and want to add function when is 12 AM to disable selected day? this is code :
M.Datepicker.init(Calendar, {
format: 'dd-mm-yyyy',
showClearBtn: true,
disableWeekends: true,
firstDay: 1,
minDate: new Date(2020, 9, 1),
i18n: {
clear: 'Remove',
done: 'Confirm'
},`
I believe there is no such option in that plugin to do so.
What I would do, is check before calling that plugin, that current time is before 12 AM.
If it is, I would display the datepicker, else, I would hide it and show message informing that.

React native modal date time picker is showing invalid date without debugging mode

I am using react-native-modal-date-picker for select date and time. But when picker appearing every time it shows today date.
I have used Moment.js for formatting date.
Date picker :
<DateTimePicker
isVisible={this.state.isVisible}
onConfirm={this.handlePicker}
onCancel={this.hidePicker}
mode={'datetime'}
titleIOS="Pick a Date"
titleStyle={{fontWeight:'600',fontSize:14,color:'#606060'}}
confirmTextStyle={{fontWeight:'600'}}
minimumDate={today}
date={this.state.selectedDate}
/>
Selected date:
this.setState({
date: Moment().add(10, 'days').format('YYYY-MM-DD hh:mm A')
})
this.setState({
selectedDate: new Date(this.state.date)
})
It should show my selected date instead of today date. It is working fine in debug mode but not working without debug mode.

why does pickadate doesn't set input date?

Hi I'm using pickadate and for some reason the date in my input field is not showing as the date when opening the picker.
Secondly the year picker is never shown.
$("input").click(function(){
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});
});
The initialization of the plugin is occurring when the input is clicked; the same input that is to have the plugin applied. The plugin needs to be initialized on the input before the input is clicked. To do this, remove the click function:
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});

JQuery UI Datepicker Current Day

My page uses a JQuery UI Datepicker and loads with the current day selected and weekends and selected dates restricted.
I would like the current selected day to become unavailable at 2pm and the day move forward.
Can anyone help.
I would just use a variable for the the minDate
var dt = new Date();
if (dt.getHours() > 14) {
dt = dt.setDate(dt + 1); // go one day in the future
}
$(selector).datepicker({minDate: dt});
You'd just need to use the real javascript Date class methods - which I haven't used in a little while.