Daterangepicker：如何在選擇日期時停止開始和結束日期相同？

Question

我在我的網站上使用 JQuery 的 daterangepicker 插件，使用戶能夠使用 select 入住和退房日期來預訂房間。 我已經確保用戶不能 select 任何已經過去的日期，但我的問題是當用戶選擇一個特定日期作為他們的入住日期時，他們將能夠再次 select 作為他們的結賬日期，這就是我想避免他們這樣做。 例如，如果他們 select 2022 年 3 月 14 日作為他們的入住日期，他們將能夠再次 select 2022 年 3 月 14 日作為他們的退房日期。

這是我為使這項工作所做的工作：

$(".checkin").daterangepicker({
    autoApply: true,
    alwaysShowCalendars: true,
    formatDate: 'MM/DD/YYYY', // Format i chose for setting how date should look
    startDate: moment(), // I set the starting date to be the current date
    endDate: moment().add(1, 'days'), // I set the no of days not to exceed 1 day but it made only the current day selectable
    minDate: moment(),
    maxDate: moment().add(1, "days"),
    clickDate(): function(e) { // I saw this method in the daterangepicker object but it didn't work
        console.log("Specified date clicked");
    }
});

誰能幫我解決這個問題？

Answer 1

如果你不想讓用戶 select 知道確切的開始和結束日期，那么你可以在daterangerpicker function中試試這個：

避免這個

clickDate(): function(e) 

相反，使用下面的代碼覆蓋相同的日期並通過添加一天使它們連續

$('input').daterangepicker({
opens: 'left'
}, 
function(start_date,end_date) {

/*Comparing the start date and end date. if user

selected the same date then we will add one day in end date */

       if(start_date.format('DD/MM/YYYY') === end_date.format('DD/MM/YYYY')){

/* Using moment js for adding one day and overriding it into the end date

you can  call another function below to use dates */

            end_date= (moment( end_date.format('DD/MM/YYYY'), "DD/MM/YYYY").add(1, 'days'));

            $('input').data('daterangepicker').setEndDate(end_date.format('DD/MM/YYYY'));
        }
});