Class DateRangePicker
A customizable component for selecting a range of dates.
Inheritance
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class DateRangePicker : BaseDatePicker, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, INotifyValueChanged<DateRange>Remarks
The DateRangePicker component allows users to select a range of dates through an intuitive calendar interface. It's particularly useful when users need to specify date ranges for filtering, scheduling, or booking scenarios.
The component provides a calendar view with the following features:
- Visual selection of start and end dates
- Navigation between months and years
- Support for different display modes (days, months, years)
- Localization support for month names and weekdays
- Customizable first day of the week
The date range selection is done in two steps: first click selects the start date, second click selects the end date. The dates in between are automatically highlighted to show the selected range.
Examples
Basic usage example showing how to create a DateRangePicker and handle value changes:
var dateRangePicker = new DateRangePicker();
// Register to value change events
dateRangePicker.RegisterValueChangedCallback(evt => {
var startDate = evt.newValue.start;
var endDate = evt.newValue.end;
Debug.Log($"Selected date range: to ");
});
// Add to the visual tree
rootElement.Add(dateRangePicker);
UXML definition with custom configuration:
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:DateRangePicker
name="booking-dates"
value="2024-01-01,2024-01-15"
first-day-of-week="Monday"
display-mode="Days"
/>
</ui:UXML>Integration with a booking system example:
public class BookingWidget : VisualElement
{
DateRangePicker m_DateRangePicker;
Button m_ConfirmButton;
public BookingWidget()
{
// Create and configure the date range picker
m_DateRangePicker = new DateRangePicker();
m_DateRangePicker.value = new DateRange(
DateTime.Now,
DateTime.Now.AddDays(1)
);
// Create confirm button
m_ConfirmButton = new Button(OnConfirmBooking);
m_ConfirmButton.text = "Confirm Booking";
// Add to the visual hierarchy
Add(m_DateRangePicker);
Add(m_ConfirmButton);
}
void OnConfirmBooking()
{
var booking = new Booking
{
CheckIn = m_DateRangePicker.value.start,
CheckOut = m_DateRangePicker.value.end
};
BookingSystem.Reserve(booking);
}
}
Constructors
DateRangePicker()
Default constructor.
Declaration
public DateRangePicker()Properties
value
The current value of the date picker.
Declaration
[CreateProperty]
[UxmlAttribute]
public DateRange value { get; set; }Property Value
| Type | Description |
|---|---|
| DateRange |
Methods
SetValueWithoutNotify(DateRange)
Set the value of the date picker without sending a change event.
Declaration
public void SetValueWithoutNotify(DateRange newValue)Parameters
| Type | Name | Description |
|---|---|---|
| DateRange | newValue | The new value. |