d-datepicker/views/index.html

Datepicker component for Derby

<index: element="datepicker">
  <div class="datepicker {{if inline}}datepicker-inline{{/}}" as="parent">
    {{if inline}}
      {{if view === 'month'}}
        <view name="month"></view>
      {{/if}}
      {{if view === 'year'}}
        <view name="year"></view>
      {{/if}}
      {{if view === 'decade'}}
        <view name="decade"></view>
      {{/if}}
    {{else}}
      <input type="text" value="{{active}}" class="form-control" on-focus="model.set('show', true)">

      <div style="position: relative">
        <div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="display: {{if show}}block{{/}};">
          {{if show}}
            {{if view === 'month'}}
              <view name="month"></view>
            {{/}}
            {{if view === 'year'}}
              <view name="year"></view>
            {{/}}
            {{if view === 'decade'}}
              <view name="decade"></view>
            {{/}}
          {{/}}
        </div>
      </div>
    {{/}}
  </div>

<dp:>

<month:>
  <div class="datepicker-days">
    <table class="table-condensed">
      <thead>
        <tr>
          <th on-click="prevMonth()" class="prev" style="visibility: visible;">«</th>
          <th colspan="5" on-click="gotoYearView(currentDate)" class="datepicker-switch">{{getMonth(currentDate)}} {{getYear(currentDate)}}</th>
          <th on-click="nextMonth()" class="next" style="visibility: visible;">»</th>
        </tr>
        <tr>
          {{each weekDays() as #day}}
            <th class="dow">{{#day}}</th>
          {{/}}
          </tr>
      </thead>
      <tbody>
      {{each weeks as #datesInWeek, #i}}
        <tr>
        {{each #datesInWeek as #date, #j}}
          <td on-click="select(#date)" class="day {{if !#date.thisMonth}}old{{/if}} {{if activeDate(active, #date.fullDate)}}active{{/if}}">{{#date.date}}</td>
        {{/each}}
        </tr>
      {{/each}}
      </tbody>
    </table>
  </div>

<year:>
  <div class="datepicker-months">
    <table class="table-condensed">
      <thead>
        <tr>
          <th on-click="prevYear()" class="prev" style="visibility: visible;">«</th>
          <th on-click="gotoDecadeView(currentDate)" colspan="5" class="datepicker-switch">{{getYear(currentDate)}}</th>
          <th on-click="nextYear()" class="next" style="visibility: visible;">»</th>
        </tr
      ></thead>
      <tbody>
        <tr>
          <td colspan="7">
          {{each months as #month}}
            <span on-click="gotoMonthView(#month.date)" class="month {{if activeMonth(active, #month.date)}}active{{/if}}">{{#month.abbr}}</span>
          {{/each}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

<decade:>
  <div class="datepicker-years" style="display: block;">
    <table class="table-condensed">
      <thead>
        <tr>
          <th on-click="prevDecade()" class="prev" style="visibility: visible;">«</th>
          <th colspan="5" class="datepicker-switch">{{getDecadeRange(currentDate)}}</th>
          <th on-click="nextDecade()" class="next" style="visibility: visible;">»</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">
          {{each years as #year}}
            <span on-click="gotoYearView(#year.year)" class="year {{if !#year.inDecade}}old{{/if}} {{if activeYear(active, #year.year)}}active{{/if}}">{{#year.year}}</span>
          {{/each}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>