Empty Value Support Demo

This demo shows how to use and configure the empty value support in Calendula.

Date picker with empty value support

How to use:
  1. Enable empty value support by setting allowEmpty: true in the configuration.
  2. Clear the value using the "X" button that appears in the input field when it has a value.
  3. Clear the value programmatically using calendar.clearDate().
  4. Set a null date using calendar.setDate(null).
  5. The onChange callback will receive null when the date is empty.
  6. To set a new date after clearing:
    • Click on the field to open the calendar, which will show today's date as a starting point. Select any date to set the value.
    • Type a digit in the empty field to auto-fill with today's date, replacing the first digit with what you typed.
  7. The date picker always keeps an internal reference date (defaulting to today), so there's always a sensible starting point when interacting with an empty field.

Date picker without empty value support (default)