DatePicker

Molecule

Native date input ile label + hint + error anatomy. min/max kısıtlaması ve disabled desteği ile birlikte gelir.

Default

Preview

Appointment date

Select a future date.

Code

<%- include('modules/ui/DatePicker', {
  label: 'Appointment date',
  hint: 'Select a future date.'
}) %>

With value

Preview

Start date

Code

<%- include('modules/ui/DatePicker', {
  label: 'Start date',
  value: '2026-06-15'
}) %>

Error state

Preview

Due date *

Please select a date.

Code

<%- include('modules/ui/DatePicker', {
  label: 'Due date',
  required: true,
  error: 'Please select a date.'
}) %>

Disabled

Preview

Locked date

Code

<%- include('modules/ui/DatePicker', {
  label: 'Locked date',
  value: '2026-01-01',
  disabled: true
}) %>

With min / max

Preview

Booking date

Available: Jun 1–30, 2026

Code

<%- include('modules/ui/DatePicker', {
  label: 'Booking date',
  hint: 'Available: Jun 1–30, 2026',
  min: '2026-06-01',
  max: '2026-06-30'
}) %>

Source modules/ui/DatePicker.ejs

<%
  var _id   = locals.id   || 'date-' + Math.random().toString(36).substr(2, 9);
  var _dis  = locals.disabled ? 'disabled' : '';
  var _req  = locals.required ? 'required' : '';

  var baseClass = "block w-full rounded-md border bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken transition-colors px-3 py-2 text-sm";
  var stateClass = locals.error
    ? "border-error focus:border-error focus:ring-error/20"
    : "border-border focus:border-primary hover:border-text-tertiary";
%>

  <% if (locals.label) { %>
    
      <%= locals.label %><% if (locals.required) { %> *<% } %>
    
  <% } %>
  
    <%= _req %>
    <% if (locals.value) { %>value="<%= locals.value %>"<% } %>
    <% if (locals.min)   { %>min="<%= locals.min %>"<% } %>
    <% if (locals.max)   { %>max="<%= locals.max %>"<% } %>
    <% if (locals.name)  { %>name="<%= locals.name %>"<% } %>
    aria-invalid="<%= locals.error ? 'true' : 'false' %>"
  >
  <% if (locals.hint || locals.error) { %>
    
      <%= locals.error || locals.hint %>
    
  <% } %>