Home > Mobile >  Why the hour and minutes stopped at 12:00 using flatpickr in jQuery?
Why the hour and minutes stopped at 12:00 using flatpickr in jQuery?

Time:08-05

I have been stuck here for 3 days and trying to solve but did not get the solution. The objective is to make Start Date field must pre-defined value to minus 7 hours from current date/time and the End Date field must be more than Start Date. But what is happen now the time is stop at 12:00 in Start Date field.

  1. Current laptop time date/time: 04-08-2022 17:55:00 - Start Date field
  2. Should be after minus 7 hours: 04-08-2022 10:55:00 - Start Date field

Hopefully someone can help me.

enter image description here

HTML

<div >
    <div >
        <input type="text"  id="startDateMain" placeholder="Start Date">
        <input type="text"  id="endDateMain" placeholder="End Date">
    </div>
</div>

jQuery

$("#startDateMain").flatpickr({
    enableTime: true,
    altInput: true,
    dateFormat: "YYYY-MM-DD HH:mm:ss",
    altFormat: "DD-MM-YYYY HH:mm:ss",
    minuteIncrement: 1,
    minDate: moment().add(-7, 'hours').toDate(), // Here
    allowInput: true,
    parseDate: (datestr, format) => {
        return moment(datestr, format, true).toDate();
    },
    formatDate: (date, format, locale) => {
        return moment(date).format(format);
    },
});
$("#endDateMain").flatpickr({
    enableTime: true,
    altInput: true,
    dateFormat: "YYYY-MM-DD HH:mm:ss",
    altFormat: "DD-MM-YYYY HH:mm:ss",
    minuteIncrement: 1,
    allowInput: true,
    parseDate: (datestr, format) => {
        return moment(datestr, format, true).toDate();
    },
    formatDate: (date, format, locale) => {
        return moment(date).format(format);
    }
});
function formatDate(date, format) {
    const map = {
        mm: addZero(date.getMonth()   1),
        dd: addZero(date.getDate()),
        yyyy: addZero(date.getFullYear()),
        h: addZero(date.getHours()),
        i: addZero(date.getMinutes()),
        s: addZero(date.getSeconds())
    }
    return format.replace(/mm|dd|yyyy|h|i|s/gi, matched => map[matched]);
}

CodePudding user response:

According to my research Flatpicker do not support minDate with time may be my solution will help.best of luck

$(function(){

    var date = $("#startDateMain").flatpickr({
    enableTime: true,
    altInput: true,
    dateFormat: "YYYY-MM-DD HH:mm:ss",
    altFormat: "DD-MM-YYYY HH:mm:ss",
    defaultDate:moment().add(-7,'hours').toDate(),
    minuteIncrement: 1,
    minDate: moment().subtract(7, 'hours').toDate(), // Here
    allowInput: true,
    parseDate: (datestr, format) => {
        return moment(datestr, format, true).toDate();
    },
    formatDate: (date, format, locale) => {
        return moment(date).format(format);
    },
});

    date.set('onOpen', function(){
        if ($('#startDateMain').val() == '') date.setDate( get_start_time() );
    });

    $('#startDateMain').change(function(){
        var date_val = $('#startDateMain').val();
        if (moment(date_val).isValid()) {
            if (moment(date_val).isBefore( get_start_time() )) {
                date.setDate( get_start_time() );
            }
        }
    });

    function get_start_time() {
        
        var start = moment().add(-7,'hours');
        
        return moment(start).valueOf();
    }

});
  • Related