Skip to main content

_DualDate Partial View Documentation

Dual-segment date picker. Displays Hijri and Gregorian dates side by side. Supports optional date range limits.

UI Preview​

StatePreview
Defaultalt text
Calendar Popoveralt text

Usage​

Option 1: Tuple Model (Classic)​

<partial name="UI/_DualDate" model='("Label Text", isRequired, "uniqueId")' />
<partial name="UI/_DualDate" model='new {
    id          = "editor1",
    label       = "وصف الحالة",
    required    = true,
    placeholder = "",
    minDate     = "today",
    maxDate     = "+2m"
}' />

Parameters​

Tuple Model​

IndexTypeRequiredDescription
[0]stringYesLabel text
[1]boolYesRequired validator toggle
[2]stringYesUnique ID (used as Hijri input name and ID)
[3]stringNoPlaceholder text (defaults to "يوم/شهر/سنة")

Anonymous Object Model​

PropertyTypeRequiredDescription
idstringYesUnique ID for the component
labelstringYesLabel text displayed above the picker
requiredboolNoEnables required validation (default: false)
placeholderstringNoPlaceholder text (default: "يوم/شهر/سنة")
minDatestringNoEarliest selectable date (see formats below)
maxDatestringNoLatest selectable date (see formats below)

Note: id must be unique per page.

Date Limit Formats (minDate / maxDate)​

Both accept the same formats. Auto-detected — no flag needed.

FormatExampleDescription
"today""today"Current date (Hijri)
"+Nm""+1m", "+2m"N months after today (Hijri calendar)
"-Nm""-1m", "-3m"N months before today (Hijri calendar)
Hijri date"1448-02-01"Fixed Hijri date (yyyy-MM-dd, year ≤ 1600)
Gregorian date"2026-07-01"Fixed Gregorian date (yyyy-MM-dd, year ≥ 1800)

Examples​

{{-- Last month to next 2 months --}}
minDate="-1m"  maxDate="+2m"

{{-- From today forward only --}}
minDate="today"

{{-- Fixed Hijri range --}}
minDate="1448-01-01"  maxDate="1448-06-30"

{{-- Fixed Gregorian range --}}
minDate="2026-01-01"  maxDate="2026-12-31"

{{-- Mix: Gregorian min, relative max --}}
minDate="2026-06-01"  maxDate="+1m"

Edge Cases​

ScenarioBehavior
minDate > maxDateBoth limits ignored; console warning emitted
Invalid formatLimit ignored (treated as no limit)
null / emptyNo restriction on that side
Month-end day clampIf today = day 30 and target month has 29 days → 29

Validation​

  • Calendar UI: disabled cells are greyed out and unclickable
  • Form submit: hooks automatically; shows red border + error message
  • Error messages:
    • Required + empty → "&#123;Label&#125; مطلوب"
    • Out of range → "&#123;Label&#125; خارج النطاق المسموح"

Manual validate​

var isValid = window.validateDDate["myDateId"]();

Form Submission Values​

Two hidden inputs submitted with the form:

NameFormatDescription
&#123;id&#125;yyyy/mm/ddSelected Hijri date
&#123;id&#125;-gregyyyy/mm/ddAuto Gregorian date

JavaScript API​

getDualDate(id)​

var dates = getDualDate("receiptDate");
// { hijri: "1447/06/22", gregorian: "2025/12/12" }  or  null

window.__ddDates[id]​

Same object, direct access:

window.__ddDates["receiptDate"]; // { hijri, gregorian } or null

Style Override​

/* Selected day color */
.double-date-wrapper .day-cell.selected {
  background-color: #YOUR_COLOR !important;
  border-color: #YOUR_COLOR;
}
/* Today indicator */
.double-date-wrapper .day-cell.today {
  border-color: #YOUR_COLOR;
}
/* Disabled day (out of range) */
.double-date-wrapper .day-cell.disabled {
  opacity: 0.35;
}

Dependencies​

Load before the partial:

  • jQuery
  • jquery.calendars.js
  • jquery.calendars.ummalqura.js