How do I determine the shutdown dates on a DateField?


I have a DateField so that users can search for old auction data. But the old auction data can only be searched until yesterday. So my DateField component will show yesterday's date by default. Dates that were from today and later should not be available for my date field.

To satisfy the above conditions, I have set setRangeEnd () below:

    Calendar calendar = Calendar.getInstance();
    calendar.add(Calendar.DATE, -1);
    Date yesterday = new Date(calendar.getTimeInMillis());
    PopupDateField auctionDate = new PopupDateField("Auction Date", yesterday);


And I set the color of the outer range of days to red.

  .v-datefield-calendarpanel-day-outside-range {
    color:red !important;


This is good, but I have one more condition. Every Sunday auction was OFF . Thus, users should not select these weekend days in my date field (every Sunday should be non-displayable and show the color as red).
Please give me suggestions on how I can define unselectable dates in a DateField . Thank!


source to share

1 answer

Try css. If Sunday is the last column:

.v-datefield-calendarpanel-body  tr>td:last-child{
   pointer-events: none;
   color: red;


If the Sunday column is the first column (in the first date field vaadin is hidden, so the Sunday column is the second):

.v-datefield-calendarpanel-body  tr>td:first-child + td{
   pointer-events: none;
   color: red;




All Articles