angular-nepali-datepicker
Version:
Simple Nepali datepicker component for angular applications
533 lines (520 loc) • 26.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('nepali-date'), require('@angular/forms'), require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay')) :
typeof define === 'function' && define.amd ? define('angular-nepali-datepicker', ['exports', 'nepali-date', '@angular/forms', '@angular/core', '@angular/common', '@angular/cdk/overlay'], factory) :
(factory((global['angular-nepali-datepicker'] = {}),global.NepaliDateConverter,global.ng.forms,global.ng.core,global.ng.common,global.ng.cdk.overlay));
}(this, (function (exports,NepaliDateConverter,forms,core,common,overlay) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @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: core.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: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return DatepickerComponent; }),
multi: true
}
],
encapsulation: core.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: core.Input }],
alwaysVisible: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
language: [{ type: core.Input }],
monthDisplayType: [{ type: core.Input }],
dayDisplayType: [{ type: core.Input }],
dateFormatter: [{ type: core.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: core.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: core.NgModule, args: [{
declarations: [DatepickerComponent, ToNpPipe],
imports: [common.CommonModule, overlay.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
*/
exports.NpDatepickerModule = NpDatepickerModule;
exports.DatepickerComponent = DatepickerComponent;
exports.ToNpPipe = ToNpPipe;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=angular-nepali-datepicker.umd.js.map