Component DateSelect

"Day "
select value={{ date.day }}
  for day in days
    option value={{ day }} selected={{ date.day == day && 'selected' }}
      {{ day }}
" Month "
select value={{ date.month }}
  for month in months
    option value={{ month }} selected={{ date.month == month && 'selected' }}
      {{ month }}
" Year "
select value={{ date.year }}
  for year in years
    option value={{ year }} selected={{ date.year == year && 'selected' }}
      {{ year }}

Result

The controller of the date range component ensure the years are coherent.

Component DateRangeSelect

p
  component DateSelect date={{ start }}
p
  component DateSelect date={{ end }}

Template used

component DateRangeSelect start={{ d1 }} end={{ d2 }}

Data