简体   繁体   中英

Can primefaces calendar make past dates and times disabled?

I'm trying to make a calendar popup on a website to allow the user to pick a date. This is for a reminder/task implementation. I do not want the user to be able to select a previous date or time.

All that anyone has given for advice to this question is mindate="today (get new Date())" . Which is great, because it makes previous days not able to be selected. However, people could still choose a time of the day today, that is previous to right now. So, one would naturally pick minHour and minMinute , but those retain for future days as well. So if I have all 3 of those set, we get close, but the issue is, if I select a date of tomorrow, it will only allow times of day based off of minMinute and minHour , which are based off of your system time of "today (get new Date())" . You should be able to select any time you want tomorrow.

Can I make the calendar only valid for days and times after "right now"??

This seems like a natural setting. futureDates="disabled" , pastDates="disabled" , etc.

I guess doing all of this in the same calendar component is not possible by default. As it requires that you change the values of minHour and minMinute after the user has picked a date. Which means the calendar component needs to render again.

You could divide this into two components: One for only picking the date and another one for picking the time.

Then you can do an ajax call when the user selects a date and rerender the time component based on the selected date and set the minHour and minMinute according to the chosen date.

This is what the xhtml could look like:

<p:calendar id="dateOnly" mindate="#{datePickerView.minDate}"
    value="#{datePickerView.chosenDate}">

    <p:ajax event="dateSelect" listener="#{datePickerView.handleDateSelect}" update="timeOnly" />  
</p:calendar>

<br />

<p:calendar id="timeOnly" value="#{datePickerView.chosenTime}" 
    pattern="HH:mm" timeOnly="true" minHour="#{datePickerView.minHour}" 
    minMinute="#{datePickerView.minMinute}" />

And this is what the bean could look like:

public class DatePickerView implements Serializable {
    private static final long serialVersionUID = 1L;

    private Date chosenDate;
    private Date chosenTime;

    public void handleDateSelect(DateSelectEvent event) {
        chosenDate = event.getDate();
    }

    public Date getMinDate() {
        return Calendar.getInstance().getTime();
    }

    public int getMinHour() {
        if (chosenDate.after(Calendar.getInstance().getTime())) {
            return 0;
        } else {
            return Calendar.getInstance().get(Calendar.HOUR_OF_DAY);
        }
    }

    public int getMinMinute() {
        if (chosenDate.after(Calendar.getInstance().getTime())) {
            return 0;
        } else {
            return Calendar.getInstance().get(Calendar.MINUTE);
        }
    }

    public Date getChosenDate() {
        return chosenDate;
    }

    public void setChosenDate(Date chosenDate) {
        this.chosenDate = chosenDate;
    }

    public Date getChosenTime() {
        return chosenTime;
    }

    public void setChosenTime(Date chosenTime) {
        this.chosenTime = chosenTime;
   }
}

You should of course add timezone handling and so on.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM