Xin Calendar 2 Examples: Start date & end date

  Start Date   End Date

It's quite often that we would have calendar for two date fields and we want to have some control on how dates are picked up for these two date fields. Examples could be start date and end date of a rental period, or start date and return date of a round trip ticket, and we will want the end date to be certain days behind the start date.

Obviously this would be another example of customizing the user functions. Let's see how we make sure that the End Date is not earlier than the Start Date.

Usually if we want to validate a field when a date is being picked for it, we will look at the user function of beforeSetDateValue(), and if we want to check how a field would affect other fields after a date is picked for it, we go for the user function of afterSetDateValue().

In this example, we will check to make sure that when the End Date is being picked (beforeSetDateValue) and the Start Date is not empty, then the End Date picked should not be earlier than the Start Date or it's will remain unchanged, and we also need to make sure that when the Start Date is picked (afterSetDateValue) and the End Date is not empty, the End Date should not be earlier than the Start Date or it will be set to the same date picked for the Start Date.

Of course, the users can input a date manually, so we will need to check the dates before the form is submitted. We simulate this with a [ Check ] button.

[Start date & end date II] [Back to index page]

# # #