Skip to main content

DateRange Component

The _DateRange partial view provides a user-friendly date picker that supports selecting a range of dates. It includes support for both Umm Al-Qura and Gregorian calendar systems.

Usage​

alt text alt text alt text

To use the component, you can render the UI/_DateRange partial view using either Html.PartialAsync or the <partial> tag helper. Pass the required parameters as a tuple.

Using Html.PartialAsync​

@await Html.PartialAsync("UI/_DateRange",
    (
        "Label Text",        // Label
        true,                // Required
        "DateRangeId",       // ID
        "Start - End",       // Placeholder
        "gregorian",         // DateType
        "handleSelectedDate" // OnSelect (Optional)
    )
)

Using Partial Tag Helper​

<partial name="UI/_DateRange"
    model='@("Label Text", false, "DateRangeId2", "Start - End", "ummalqura", "handleSelectedDate")' />

Parameters​

The model for this partial view is a ValueTuple. The parameters must be passed in the specific order listed below:

NameTypeRequiredDefaultDescription
LabelstringYes-The text label to display above the input field.
RequiredboolYes-Specifies if the field is mandatory. Adds validation styles and logic.
IdstringYes-The unique ID attribute for the input element.
PlaceholderstringYes-Text to display when the input is empty.
DateTypestringNo"ummalqura"The type of calendar to use. Values: "ummalqura" or "gregorian".
OnSelectstringNonullName of a global Javascript callback function to trigger when a date is selected.

Client-Side Features​

Validation​

The component includes built-in validation. If Required is set to true:

  • A red asterisk (*) is appended to the label.
  • The input border turns red and an error message appears if left empty upon form submission or user interaction.
  • The calendar icon changes color to reflect validation state (Red for error, Green for valid).

JavaScript Helper​

A global helper function is available to easily retrieve the selected values from the input.

getDateRangeValue(inputId)​

Extracts the selected dates as an array.

Example:

// Function signature
// window.getDateRangeValue = function (inputId) { ... }

// Usage
var props = window.getDateRangeValue("DateRangeId");

// Output examples:
// []                  -> No date selected
// ["1446-01-01"]      -> Single date selected
// ["1446-01-01", "1446-01-10"] -> Date range selected

Callback Function​

If an OnSelect function name is provided, it will be called with the selected date strings and the input ID.

Example:

function handleSelectedDate(dateStrings, inputId) {
  console.log("Selected dates:", dateStrings);
  console.log("Input ID:", inputId);
}