ng-hijri-gregorian-datepicker/src/templates/datepicker.html

Lightweight Angular.js hijri and gregorian datepicker directive built with Moment.js.

<div class="ng-hg-datepicker" ng-show="pickerDisplayed">
    <div class="ng-hg-datepicker-table-header-bckgrnd"></div>
    <table ng-class="{rtl: config.isRTL }">
        <caption>
            <div class="ng-hg-datepicker-header-wrapper">
				<span class="ng-hg-datepicker-arrow ng-hg-datepicker-arrow-left" ng-click="prevMonth()">
					<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50" y="50" viewBox="0 0 100 100" xml:space="preserve">
						<polygon points="64.8,36.2 35.2,6.5 22.3,19.4 51.9,49.1 22.3,78.8 35.2,91.7 77.7,49.1" />
					</svg>
				</span>
                <div class="ng-hg-datepicker-header-year">
                    <div class="ng-hg-datepicker-custom-select-box" outside-click="showMonthsList = false">
                        <span class="ng-hg-datepicker-custom-select-title ng-hg-datepicker-month-name"
                              ng-click="showMonthsList = !showMonthsList; showYearsList = false"
                              ng-class="{selected: showMonthsList }">
                            {{  config.defaultDisplay == 'hijri' ? calendarCursor.format('iMMMM') :  calendarCursor.format('MMMM') }}
                        </span>
                        <div class="ng-hg-datepicker-custom-select" ng-show="showMonthsList">                            <span ng-if="config.defaultDisplay == 'gregorian'" ng-repeat="monthName in monthsList" ng-click="selectMonth(monthName); showMonthsList = false">{{ monthName }}</span><span ng-if="config.defaultDisplay == 'hijri'" ng-repeat="monthName in monthsInHijriList" ng-click="selectMonth(monthName); showMonthsList = false">{{ monthName }}</span>                        </div>
                    </div>
                    <div class="ng-hg-datepicker-custom-select-box" outside-click="showYearsList = false">
                        <span class="ng-hg-datepicker-custom-select-title" ng-click="showYearsList = !showYearsList; showMonthsList = false" ng-class="{selected: showYearsList }">{{ config.defaultDisplay == 'hijri' ? calendarCursor.format('iYYYY') : calendarCursor.format('YYYY') }}</span>
                        <div class="ng-hg-datepicker-custom-select" ng-show="showYearsList">                            <span ng-if="config.defaultDisplay == 'gregorian'" ng-repeat="yearNumber in yearsList" ng-click="selectYear(yearNumber)">{{ yearNumber }}</span> <span ng-if="config.defaultDisplay == 'hijri'" ng-repeat="yearNumber in yearsInHijriList" ng-click="selectYear(yearNumber)">{{ yearNumber }}</span>                        </div>
                    </div>
                </div>
                <span class="ng-hg-datepicker-arrow ng-hg-datepicker-arrow-right" ng-click="nextMonth()">
					<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50" y="50" viewBox="0 0 100 100" xml:space="preserve">
						<polygon points="64.8,36.2 35.2,6.5 22.3,19.4 51.9,49.1 22.3,78.8 35.2,91.7 77.7,49.1" />
					</svg>
				</span>
            </div>
        </caption>
        <tbody>
        <tr class="days-head">
            <td class="day-head" ng-repeat="dayName in daysNameList">{{ dayName }}</td>
        </tr>
        <tr class="days" ng-repeat="week in currentWeeks">
            <td ng-repeat="day in week" ng-click="selectDay(day)" ng-class="['day-item', { 'isToday': day.isToday, 'isInMonth': ( day.isInHijriMonth && config.defaultDisplay == 'hijri') || ( day.isInMonth && config.defaultDisplay == 'gregorian'), 'isDisabled': !day.isSelectable, 'isSelected': day.isSelected }]"><span ng-if="config.defaultDisplay == 'gregorian'">{{ day.day }}</span><span ng-if="config.defaultDisplay == 'hijri'">{{ day.dayInHijri }}</span></td>
        </tr>
        </tbody>
    </table>
    <button class="switchBtn" ng-click="switchDate()">{{switchButtonLabel}}</button>
</div>