angular-nepali-datepicker
Version:
Simple Nepali datepicker component for angular applications
473 lines (464 loc) • 21.5 kB
JavaScript
import { __spread, __assign } from 'tslib';
import * as NepaliDateConverter from 'nepali-date';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, forwardRef, Input, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OverlayModule } from '@angular/cdk/overlay';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var numberMapping = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'];
/** @type {?} */
var wordsMapping = {
year: 'साल',
month: 'महिना'
};
/** @type {?} */
var daysMapping = {
en: {
default: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
},
ne: {
default: ['आइत', 'सोम', 'मंगल्', 'बुध', 'बिही', 'शुक्र', 'शनि'],
short: ['आ', 'सो', 'मं', 'बु', 'बि', 'शु', 'श']
}
};
/** @type {?} */
var monthsMapping = {
en: {
default: [
'Baisakh', 'Jestha', 'Asadh', 'Shrawan', 'Bhadra', 'Ashwin', 'Kartik', 'Mangsir', 'Poush', 'Marga', 'Falgun', 'Chaitra'
],
modern: [
'Baisakh', 'Jeth', 'Asaar', 'Saawn', 'Bhadau', 'Aashoj', 'Kartik', 'Mangsir', 'Push', 'Magh', 'Fagun', 'Chait'
],
short: [
'Bai', 'Jes', 'Asa', 'Shr', 'Bha', 'Ash', 'Kar', 'Man', 'Pou', 'Mar', 'Fal', 'Cha'
]
},
ne: {
default: [
'बैशाख', 'जेष्ठ', 'आषाढ', 'श्रवण', 'भाद्र', 'आश्विन', 'कार्तिक', 'मंसिर', 'पौष', 'मार्ग', 'फाल्गुन', 'चैत्र'
],
modern: [
'बैशाख', 'जेठ', 'असार', 'साउन', 'भदौ', 'अशोज', 'कार्तिक', 'मंसिर', 'पुष', 'माघ', 'फागुन', 'चैत'
],
short: [
'बै', 'जे', 'अ', 'श्रा', 'भा', 'आ', 'का', 'मं', 'पौ', 'मा', 'फा', 'चै'
]
}
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatepickerComponent = /** @class */ (function () {
function DatepickerComponent() {
var _this = this;
this.nepaliDateToday = { day: 0, month: 0, year: 0 };
this.currentNepaliDate = { day: 0, month: 0, year: 0 };
this.formattedDate = "";
this.currentDate = new Date();
this.years = [];
this.daysMapping = daysMapping;
this.monthsMapping = monthsMapping;
this.isOpen = false;
this.hideInput = false;
this.alwaysVisible = false;
this.language = "ne";
this.monthDisplayType = "default";
this.dayDisplayType = "default";
this.dateFormatter = function (selectedDate) {
/** @type {?} */
var dd = selectedDate.day < 10 ? "0" + selectedDate.day : selectedDate.day;
/** @type {?} */
var mm = selectedDate.month < 10 ? "0" + selectedDate.month : selectedDate.month;
return dd + "/" + mm + "/" + _this.selectedDate.year;
};
this.propagateChange = function (_) { };
this.propagateTouch = function (_) { };
}
/**
* @return {?}
*/
DatepickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var nepaliDateToday = new NepaliDateConverter(new Date());
this.nepaliDateToday = {
year: nepaliDateToday.getYear(),
month: nepaliDateToday.getMonth(),
day: nepaliDateToday.getDate()
};
this.setCurrentDate();
this.populateYears();
this.setCurrentMonthData();
};
/**
* @return {?}
*/
DatepickerComponent.prototype.setCurrentDate = /**
* @return {?}
*/
function () {
/** @type {?} */
var currentNepaliDate;
if (!this.selectedDate) {
currentNepaliDate = new NepaliDateConverter(this.currentDate);
}
else {
var _a = this.selectedDate, year = _a.year, month = _a.month, day = _a.day;
currentNepaliDate = new NepaliDateConverter(year, month, day);
this.currentDate = currentNepaliDate.getEnglishDate();
}
this.currentNepaliDate = {
year: currentNepaliDate.getYear(),
month: currentNepaliDate.getMonth(),
day: currentNepaliDate.getDate()
};
};
/**
* @return {?}
*/
DatepickerComponent.prototype.populateYears = /**
* @return {?}
*/
function () {
for (var i = 2001; i <= 2088; i++) {
this.years.push(i);
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.resetCurrentMonthData = /**
* @return {?}
*/
function () {
this.currentMonthData = {
0: [],
1: [],
2: [],
3: [],
4: [],
5: [],
6: []
};
};
/**
* @return {?}
*/
DatepickerComponent.prototype.formatValue = /**
* @return {?}
*/
function () {
if (this.selectedDate) {
this.formattedDate = this.dateFormatter(this.selectedDate);
}
};
/**
* @param {?} value
* @return {?}
*/
DatepickerComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this.selectedDate = value;
this.currentNepaliDate = value;
this.formatValue();
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.registerOnTouched = /**
* @return {?}
*/
function () { };
/**
* @param {?} fn
* @return {?}
*/
DatepickerComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @return {?}
*/
DatepickerComponent.prototype.setCurrentMonthData = /**
* @return {?}
*/
function () {
this.resetCurrentMonthData();
// fill the currentMonthData with current date
/** @type {?} */
var day = this.currentDate.getDay();
this.currentMonthData[day] = [this.currentNepaliDate.day];
// fill the currentMonthData with day before the current date
this.setMonthDataBefore(day - 1, this.currentNepaliDate.day - 1);
// fill the currentMonthData with day after the current date
this.setMonthDataAfter(day + 1, this.currentNepaliDate.day + 1);
// we need some empty spaces in place so that the dates are shown in correct order
// eg if the 1st day starts on monday then we need 1 empty space for non existingn date on Sunday
this.createEmptySpaces();
};
/**
* @param {?} day
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.setMonthDataBefore = /**
* @param {?} day
* @param {?} date
* @return {?}
*/
function (day, date) {
if (date >= 1) {
if (day < 0) {
day = 6;
}
this.currentMonthData[day] = __spread([date], this.currentMonthData[day]);
this.setMonthDataBefore(--day, --date);
}
};
/**
* @param {?} day
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.setMonthDataAfter = /**
* @param {?} day
* @param {?} date
* @return {?}
*/
function (day, date) {
/** @type {?} */
var nepaliDate = new NepaliDateConverter(this.currentNepaliDate.year, this.currentNepaliDate.month, date);
// only add the data if the current month matches
if (nepaliDate.getMonth() === this.currentNepaliDate.month) {
if (day > 6) {
day = 0;
}
this.currentMonthData[day] = __spread(this.currentMonthData[day], [date]);
this.setMonthDataAfter(++day, ++date);
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.createEmptySpaces = /**
* @return {?}
*/
function () {
// first find out which day has the 1st
// if its a Sunday, then don't do anything else add 1 space on each previous day
/** @type {?} */
var dayIndex = 0;
Object.values(this.currentMonthData).find(function (value, index) {
if (value.includes(1)) {
dayIndex = index;
}
return value.includes(1);
});
if (dayIndex) {
for (dayIndex; dayIndex > 0; dayIndex--) {
/** @type {?} */
var monthData = this.currentMonthData[dayIndex - 1];
this.currentMonthData[dayIndex - 1] = __spread([null], monthData);
}
}
};
/**
* @param {?} day
* @return {?}
*/
DatepickerComponent.prototype.selectDate = /**
* @param {?} day
* @return {?}
*/
function (day) {
this.selectedDate = __assign({}, this.currentNepaliDate, { day: day });
this.formatValue();
this.close();
this.propagateChange(this.selectedDate);
};
/**
* @param {?} year
* @return {?}
*/
DatepickerComponent.prototype.selectYear = /**
* @param {?} year
* @return {?}
*/
function (year) {
this.currentNepaliDate.year = +year;
/** @type {?} */
var newDate = new NepaliDateConverter(this.currentNepaliDate.year, this.currentNepaliDate.month, this.currentNepaliDate.day);
this.currentDate = newDate.getEnglishDate();
this.setCurrentMonthData();
};
/**
* @param {?} month
* @return {?}
*/
DatepickerComponent.prototype.selectMonth = /**
* @param {?} month
* @return {?}
*/
function (month) {
this.currentNepaliDate.month = this.monthsMapping[this.language][this.monthDisplayType].indexOf(month);
/** @type {?} */
var newDate = new NepaliDateConverter(this.currentNepaliDate.year, this.currentNepaliDate.month, this.currentNepaliDate.day);
this.currentDate = newDate.getEnglishDate();
this.setCurrentMonthData();
};
/**
* @return {?}
*/
DatepickerComponent.prototype.toggleOpen = /**
* @return {?}
*/
function () {
if (!this.alwaysVisible) {
this.isOpen = !this.isOpen;
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.open = /**
* @return {?}
*/
function () {
this.isOpen = true;
};
/**
* @return {?}
*/
DatepickerComponent.prototype.close = /**
* @return {?}
*/
function () {
this.isOpen = false;
this.setCurrentDate();
};
DatepickerComponent.decorators = [
{ type: Component, args: [{
selector: "np-datepicker",
template: "<input\r\n class=\"datepicker__input\"\r\n type=\"text\"\r\n [value]=\"formattedDate | toNp: language\"\r\n [ngClass]=\"inputClass\"\r\n #origin=\"cdkOverlayOrigin\"\r\n cdk-overlay-origin\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n [hidden]=\"hideInput\">\r\n<ng-template\r\n cdk-connected-overlay\r\n cdkConnectedOverlayLockPosition\r\n cdkConnectedOverlayHasBackdrop\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n (backdropClick)=\"close()\"\r\n (detach)=\"close()\">\r\n <ng-container [ngTemplateOutlet]=\"dp\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngTemplateOutlet]=\"dp\" *ngIf=\"alwaysVisible\"></ng-container>\r\n\r\n<ng-template #dp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <span class=\"datepicker__options-year-container\">\r\n <span>\r\n {{'Year' | toNp : language : 'word'}}:\r\n </span>\r\n <select (change)=\"selectYear($event.target.value)\">\r\n <option\r\n *ngFor=\"let year of years\"\r\n [value]=\"year\"\r\n [selected]=\"year === currentNepaliDate?.year\">\r\n {{year | toNp: language }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-month-container\">\r\n <span>{{'Month' | toNp : language : 'word'}}: </span>\r\n <select (change)=\"selectMonth($event.target.value)\">\r\n <option\r\n *ngFor=\"let month of monthsMapping[language][monthDisplayType]; index as i\"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\">\r\n {{month}}\r\n </option>\r\n </select>\r\n </span>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div class=\"datepicker__days\" *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\">\r\n <div class=\"datepicker__weekday\">{{day}}</div>\r\n <div class=\"datepicker__date-container\" *ngFor=\"let date of currentMonthData[i]\">\r\n <div\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n [class.datepicker__date--disabled]=\"!date\"\r\n (click)=\"selectDate(date)\">\r\n <span *ngIf=\"!date\"> </span>\r\n {{date | toNp: language }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return DatepickerComponent; }),
multi: true
}
],
encapsulation: ViewEncapsulation.None,
styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.datepicker__input{display:block}.datepicker__container{--font-family:arial,sans-serif;--font-size:14px;--container-padding:8px 5px;--container-border-color:lightgray;--container-border:1px solid;--container-background-color:white;--select-height:24px;--option-margin:0 0 7px;--option-year-container-margin:0 10px 0;--days-size:40px;--weekday-margin:0 0 5px;--active-day-color:white;--active-day-background:#27a4f7;--hover-color:#27a4f7;--selected-color:#27a4f7;display:inline-block;font-family:\"arial, sans-serif\";font-family:var(--font-family);font-size:14px;font-size:var(--font-size);padding:8px 5px;padding:var(--container-padding);border:1px solid #d3d3d3;border:var(--container-border);border-color:var(--container-border-color);background-color:#fff;background-color:var(--container-background-color)}.datepicker__options-container{margin:0 0 7px;margin:var(--option-margin)}.datepicker__options-container select{height:24px;height:var(--select-height)}.datepicker__options-year-container{display:inline-block;margin:0 10px;margin:var(--option-year-container-margin)}.datepicker__days{display:inline-block;vertical-align:top;text-align:center;width:40px;width:var(--days-size)}.datepicker__weekday{margin:0 0 5px;margin:var(--weekday-margin);font-weight:700;text-align:center}.datepicker__date{width:40px;width:var(--days-size);height:40px;height:var(--days-size);line-height:40px;line-height:var(--days-size);cursor:pointer}.datepicker__date--active{color:#fff;color:var(--active-day-color);background:#27a4f7;background:var(--active-day-background)}.datepicker__date--current-day:not(.datepicker__date--active){color:#27a4f7;color:var(--selected-color);font-weight:700}.datepicker__date--disabled{pointer-events:none}.datepicker__date:hover:not(.datepicker__date--active){color:#27a4f7;color:var(--hover-color);transition:color .3s}"]
}] }
];
/** @nocollapse */
DatepickerComponent.ctorParameters = function () { return []; };
DatepickerComponent.propDecorators = {
hideInput: [{ type: Input }],
alwaysVisible: [{ type: Input }],
inputClass: [{ type: Input }],
language: [{ type: Input }],
monthDisplayType: [{ type: Input }],
dayDisplayType: [{ type: Input }],
dateFormatter: [{ type: Input }]
};
return DatepickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToNpPipe = /** @class */ (function () {
function ToNpPipe() {
}
/**
* @param {?} value
* @param {?=} language
* @param {?=} type
* @return {?}
*/
ToNpPipe.prototype.transform = /**
* @param {?} value
* @param {?=} language
* @param {?=} type
* @return {?}
*/
function (value, language, type) {
if (language === void 0) { language = 'ne'; }
if (type === void 0) { type = 'number'; }
if (value) {
if (language === 'ne') {
switch (type) {
case 'number':
/** @type {?} */
var split = value.toString().split('');
return split.map(function (n) {
if (n === ' ') {
return ' ';
}
return numberMapping[+n] ? numberMapping[+n] : n;
}).join('');
case 'word':
return wordsMapping[value.toString().toLowerCase()];
default:
}
}
return value;
}
return '';
};
ToNpPipe.decorators = [
{ type: Pipe, args: [{
name: 'toNp'
},] }
];
return ToNpPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NpDatepickerModule = /** @class */ (function () {
function NpDatepickerModule() {
}
NpDatepickerModule.decorators = [
{ type: NgModule, args: [{
declarations: [DatepickerComponent, ToNpPipe],
imports: [CommonModule, OverlayModule],
exports: [DatepickerComponent]
},] }
];
return NpDatepickerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NpDatepickerModule, DatepickerComponent, ToNpPipe };
//# sourceMappingURL=angular-nepali-datepicker.js.map