Search code examples
htmljqueryflatpickr

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


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 class="row">
    <div class="col-lg-12">
        <input type="text" class="form-control" id="startDateMain" placeholder="Start Date">
        <input type="text" class="form-control" 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]);
}

Solution

  • 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();
        }
    
    });