chocobo-range-picker.html

<div class='container'>
  <label ng-if='options.txtDateInit' style="display: block;">{{ options.txtDateInit }}</label>
  <span class='icon'>
            <input type='text' ng-click='options.inputConfig.showIcon === false ? openModal() : undefined'
                   value="{{ localeDate(leftCalendar.selectedDate) }} - {{ localeDate(rightCalendar.selectedDate) }}"
                   ng-readonly='true' class='input-text' name='dateMap'>
            <img  ng-if='options.inputConfig.showIcon === true|| !options.inputConfig'
                  ng-src='{{ options.inputConfig.iconPath ? options.inputConfig.iconPath : iconUrl }}' ng-click='openModal()'/>
    </span>
  <div class='modalClosed line' ng-class="{'modalOpen': isOpen}">
    <div class='calendar column padding-l'>
      <header>
        <h2>{{ localeMonth(leftCalendar.baseDate) }} - {{ localeYear(leftCalendar.baseDate) }}</h2>
        <a class='btn-prev fontawesome-angle-left' ng-click='previousMonth( leftCalendar )'>&#x2770;</a>
        <a class='btn-next fontawesome-angle-right' ng-click='nextMonth( leftCalendar )'
          ng-class="!(leftCalendar.baseDate < rightCalendar.baseDate)  ? 'disabled' : ''">&#x2771;</a>
      </header>
      <table>
        <thead>
          <tr>
            <td ng-repeat='dayOfWeek in weekdays()'>{{dayOfWeek | limitTo: 3}}</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='week in leftCalendar.weeks'>
            <td ng-repeat='dayOfWeek in week' ng-class="{ 'cursor': isBeforeOrEqual(dayOfWeek.date, rightCalendar.selectedDate),
                            'next-month': !dayOfWeek.calendarMonth || !betweenMinMax(dayOfWeek.date),
                            'current-day-last': isEqualsDate(dayOfWeek.date, leftCalendar.selectedDate),
                            'hover-range-normal': isBetweenDate(dayOfWeek.date, leftCalendar.selectedDate, rightCalendar.selectedDate) }"
                            ng-click="isBeforeOrEqual(dayOfWeek.date, rightCalendar.selectedDate, true) && betweenMinMax(dayOfWeek.date) && selectDate(leftCalendar, dayOfWeek.date)">
              {{dayOfWeek.date.getDate()}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class='calendar column padding-l'>
      <header>
        <h2>{{ localeMonth(rightCalendar.baseDate) }} - {{ localeYear(rightCalendar.baseDate) }}</h2>
        <a class='btn-prev fontawesome-angle-left' ng-click='previousMonth( rightCalendar )' ng-class="!( leftCalendar.baseDate < rightCalendar.baseDate )  ? 'disabled' : ''">&#x2770;</a>
        <a class='btn-next fontawesome-angle-right' ng-click='nextMonth( rightCalendar )'>&#x2771;</a>
      </header>
      <table>
        <thead>
          <tr>
            <td ng-repeat='dayOfWeek in weekdays()'>{{dayOfWeek | limitTo: 3}}</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='week in rightCalendar.weeks'>
            <td ng-repeat='dayOfWeek in week' ng-class="{ 'cursor': isAfterOrEqual(dayOfWeek.date, leftCalendar.selectedDate),
                            'next-month': !dayOfWeek.calendarMonth || !betweenMinMax(dayOfWeek.date),
                            'current-day-last': isEqualsDate(dayOfWeek.date, rightCalendar.selectedDate),
                            'hover-range-normal': isBetweenDate(dayOfWeek.date, leftCalendar.selectedDate, rightCalendar.selectedDate) }"
                            ng-click="isAfterOrEqual(dayOfWeek.date, leftCalendar.selectedDate) && betweenMinMax(dayOfWeek.date) && selectDate(rightCalendar, dayOfWeek.date)">
              {{dayOfWeek.date.getDate()}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class='column padding-l'>
      <input type='button' ng-show='options.buttons.btnYear.txt' value='{{ options.buttons.btnYear.txt }}' title='{{ options.buttons.btnYear.tooltip }}' class='button btnFade btnYear' ng-click='selectYear();'>
      <br>
      <input type='button' ng-show='options.buttons.btnSemester.txt' value='{{ options.buttons.btnSemester.txt }}' title='{{ options.buttons.btnSemester.tooltip }}' class='button btnFade btnSemester' ng-click='selectSemester();'>
      <br>
      <input type='button' ng-show='options.buttons.btnTrimester.txt' value='{{ options.buttons.btnTrimester.txt }}' title='{{ options.buttons.btnTrimester.tooltip }}' class='button btnFade btnTrimester' ng-click='selectTrimester();'>
      <br>
      <input type='button' ng-show='options.buttons.btnMonth.txt' name='btnMes' value='{{ options.buttons.btnMonth.txt }}' title='{{ options.buttons.btnMonth.tooltip }}' class='button btnFade btnMonth' ng-click='selectMonth();'>
      <br>
      <input type='button' ng-show='options.buttons.btnWeek.txt' value='{{ options.buttons.btnWeek.txt }}' title='{{ options.buttons.btnWeek.tooltip }}' class='button btnFade btnColorWeek' ng-click='selectWeek();'>
      <br>
      <input type='button' ng-show='options.buttons.btnLastDay.txt' value='{{ options.buttons.btnLastDay.txt }}' title='{{ options.buttons.btnLastDay.tooltip }}' class='button btnFade btnLastDay' ng-click='selectLastDay();'>
      <br>
      <input type='button' ng-show='options.buttons.btnToday.txt' value='{{ options.buttons.btnToday.txt }}' title='{{ options.buttons.btnToday.tooltip }}' class='button btnFade btnToday' ng-click='selectToday();'>
    </div>
  </div>
</div>