ng-hijri-gregorian-datepicker/dist/ng-hijri-gregorian-datepicker.min.js

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

!function(){"use strict";function e(g,m,u,f){return{restrict:"A",require:"ngModel",scope:{config:"=datepickerConfig",selectedDate:"=selectedDate"},link:function(h,t,e,a){var n=angular.element(g.get("datepicker.html")),p="",y=moment.utc();h.currentLocale=moment.locale();var r={allowFuture:!0,allowPast:!0,dateFormat:"DD/MM/YYYY",gregorianDateFormat:"DD/MM/YYYY",hijriDateFormat:"iDD/iMM/iYYYY",minDate:moment().subtract(5,"years"),maxDate:moment().add(5,"years"),defaultDisplay:"gregorian",locale:null},i={gregorian:"ميلادي",hijri:"هجري"},o={gregorian:"Gregorian",hijri:"Hijri"};function s(e){n===e.target||n[0].contains(e.target)||e.target===t[0]||(u.off("click",s),h.$apply(function(){h.calendarCursor=p||y,h.pickerDisplayed=h.showMonthsList=h.showYearsList=!1}))}function c(e){var t,a=[],n=(e=moment.utc(e),null);"gregorian"===h.config.defaultDisplay?(t=moment(e).date(1),n=moment(e).date(e.daysInMonth())):(t=moment(e).iDate(1),n=moment(e).iDate(D(""+e.endOf("iMonth").format("iDD"))));var r=moment(t),i=moment(n);r=0===t.weekday()?r:r.weekday(0),i=6===n.weekday()?i:i.weekday(6);for(var o=[],s=moment(r);s.isBefore(moment(i).add(1,"days"));s.add(1,"days")){var c=!h.config.minDate||s.isAfter(h.config.minDate,"day"),l=!h.config.maxDate||s.isBefore(h.config.maxDate,"day"),d=s.isAfter(y),g=s.isBefore(y),m=h.config.allowFuture||!d,u=h.config.allowPast||!g,f={date:moment(s).toDate(),isToday:s.isSame(y,"day"),isInMonth:s.isSame(t,"month"),isInHijriMonth:s.iMonth()===t.iMonth(),isSelected:s.isSame(p,"day"),dayInHijri:D(""+s.format("iDD")),day:D(""+s.format("DD")),isSelectable:c&&l&&m&&u};o.push(f),6!==s.weekday()&&s!==i||(a.push(o),o=[])}return a}function D(e){return Number(e.replace(/[٠١٢٣٤٥٦٧٨٩]/g,function(e){return e.charCodeAt(0)-1632}).replace(/[۰۱۲۳۴۵۶۷۸۹]/g,function(e){return e.charCodeAt(0)-1776}))}function l(e){return e.replace(/[٠١٢٣٤٥٦٧٨٩]/g,function(e){return e.charCodeAt(0)-1632}).replace(/[۰۱۲۳۴۵۶۷۸۹]/g,function(e){return e.charCodeAt(0)-1776})}function d(){"gregorian"===h.config.defaultDisplay&&moment.locale().startsWith("ar")?h.switchButtonLabel=i.hijri:"gregorian"===h.config.defaultDisplay&&moment.locale().startsWith("en")?h.switchButtonLabel=o.hijri:"hijri"===h.config.defaultDisplay&&moment.locale().startsWith("ar")?h.switchButtonLabel=i.gregorian:"hijri"===h.config.defaultDisplay&&moment.locale().startsWith("en")&&(h.switchButtonLabel=o.gregorian)}h.config=angular.extend(r,h.config),angular.isDefined(h.config.locale)&&moment.locale(h.config.locale),angular.isDefined(h.config.minDate)&&moment.utc(h.config.minDate).subtract(1,"day"),angular.isDefined(h.config.maxDate)&&moment.utc(h.config.maxDate).add(1,"day"),h.config.isRTL=moment.locale().startsWith("ar"),d(),h.calendarCursor=y,h.currentWeeks=[],h.daysNameList=f.getDaysNames(),h.monthsList=moment.months(),h.monthsInHijriList=moment.localeData()._iMonths,h.yearsList=f.getYearsList(h.config),h.yearsInHijriList=f.getYearsInHijriList(h.config),h.pickerDisplayed=!1,h.$watch(function(){return a.$modelValue},function(e){e&&(p=h.calendarCursor=moment.utc(e,h.config.dateFormat))}),h.$watch("calendarCursor",function(e){h.currentWeeks=c(e)}),h.$watch("currentLocale",function(){h.daysNameList=f.getDaysNames(),h.monthsList=moment.months(),h.monthsInHijriList=moment.localeData()._iMonths,h.calendarCursor.locale(moment.locale()),h.config.isRTL=moment.locale().startsWith("ar"),d()}),t.bind("click",function(e){h.$apply(function(){h.currentLocale=moment.locale(),h.pickerDisplayed=!0,u.on("click",s)})}),t.parent().addClass("ng-hg-datepicker-wrapper"),m(n)(h),t.after(n),angular.isDefined(a.$modelValue)&&moment.isDate(a.$modelValue)&&(h.calendarCursor=a.$modelValue),h.prevMonth=function(){"gregorian"===h.config.defaultDisplay?h.calendarCursor=moment(h.calendarCursor).subtract(1,"months"):h.calendarCursor=moment(h.calendarCursor).subtract(1,"iMonth")},h.nextMonth=function(){"gregorian"===h.config.defaultDisplay?h.calendarCursor=moment(h.calendarCursor).add(1,"months"):h.calendarCursor=moment(h.calendarCursor).add(1,"iMonth")},h.selectMonth=function(e){h.showMonthsList=!1,"gregorian"===h.config.defaultDisplay?h.calendarCursor=moment(h.calendarCursor).month(e):h.calendarCursor=moment(h.calendarCursor).iMonth(e)},h.selectYear=function(e){h.showYearsList=!1,"gregorian"===h.config.defaultDisplay?h.calendarCursor=moment(h.calendarCursor).year(e):h.calendarCursor=moment(h.calendarCursor).iYear(e)},h.selectDay=function(e){(e.isSelectable&&!e.isFuture||h.config.allowFuture&&e.isFuture)&&(h.currentWeeks.forEach(function(e,a){e.forEach(function(e,t){h.currentWeeks[a][t].isSelected=!1})}),e.isSelected=!0,a.$setViewValue(l(moment.utc(e.date).format(h.config.dateFormat))),h.selectedDate={hijri:l(moment.utc(e.date).format(h.config.hijriDateFormat)),gregorian:l(moment.utc(e.date).format(h.config.gregorianDateFormat))},a.$render(),h.pickerDisplayed=!1)},h.switchDate=function(){"gregorian"===h.config.defaultDisplay?h.config.defaultDisplay="hijri":h.config.defaultDisplay="gregorian",d(),h.currentWeeks=c(h.calendarCursor),h.showMonthsList=h.showYearsList=!1}}}}e.$inject=["$templateCache","$compile","$document","datesCalculator"],angular.module("ngHijriGregorianDatepicker",[]).directive("ngHijriGregorianDatepicker",e)}(),function(){"use strict";angular.module("ngHijriGregorianDatepicker").factory("datesCalculator",function(){return{getYearsList:function(e){var t=e.minDate.year(),a=e.maxDate.year();e.allowPast||(t=moment().year());e.allowFuture||(a=moment().year());for(var n=[],r=t;r<=a;r++)n.push(r);return n},getYearsInHijriList:function(e){var t=e.minDate.iYear(),a=e.maxDate.iYear();e.allowPast||(t=moment().iYear());e.allowFuture||(a=moment().iYear());for(var n=[],r=t;r<=a;r++)n.push(r);return n},getDaysNames:function(){for(var e=[],t=0;t<7;t++)e.push(moment().weekday(t).format("ddd"));return e}}})}(),angular.module("ngHijriGregorianDatepicker").run(["$templateCache",function(e){e.put("datepicker.html",'\r\n<div class="ng-hg-datepicker" ng-show="pickerDisplayed">\r\n    <div class="ng-hg-datepicker-table-header-bckgrnd"></div>\r\n    <table ng-class="{rtl: config.isRTL }">\r\n        <caption>\r\n            <div class="ng-hg-datepicker-header-wrapper">\r\n\t\t\t\t<span class="ng-hg-datepicker-arrow ng-hg-datepicker-arrow-left" ng-click="prevMonth()">\r\n\t\t\t\t\t<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">\r\n\t\t\t\t\t\t<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" />\r\n\t\t\t\t\t</svg>\r\n\t\t\t\t</span>\r\n                <div class="ng-hg-datepicker-header-year">\r\n                    <div class="ng-hg-datepicker-custom-select-box" outside-click="showMonthsList = false">\r\n                        <span class="ng-hg-datepicker-custom-select-title ng-hg-datepicker-month-name"\r\n                              ng-click="showMonthsList = !showMonthsList; showYearsList = false"\r\n                              ng-class="{selected: showMonthsList }">\r\n                            {{  config.defaultDisplay == \'hijri\' ? calendarCursor.format(\'iMMMM\') :  calendarCursor.format(\'MMMM\') }}\r\n                        </span>\r\n                        <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>\r\n                    </div>\r\n                    <div class="ng-hg-datepicker-custom-select-box" outside-click="showYearsList = false">\r\n                        <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>\r\n                        <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>\r\n                    </div>\r\n                </div>\r\n                <span class="ng-hg-datepicker-arrow ng-hg-datepicker-arrow-right" ng-click="nextMonth()">\r\n\t\t\t\t\t<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">\r\n\t\t\t\t\t\t<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" />\r\n\t\t\t\t\t</svg>\r\n\t\t\t\t</span>\r\n            </div>\r\n        </caption>\r\n        <tbody>\r\n        <tr class="days-head">\r\n            <td class="day-head" ng-repeat="dayName in daysNameList">{{ dayName }}</td>\r\n        </tr>\r\n        <tr class="days" ng-repeat="week in currentWeeks">\r\n            <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>\r\n        </tr>\r\n        </tbody>\r\n    </table>\r\n    <button class="switchBtn" ng-click="switchDate()">{{switchButtonLabel}}</button>\r\n</div>\r\n')}]);