Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@next-level-integration/nli-datefield-lib

Package Overview
Dependencies
Maintainers
6
Versions
184
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@next-level-integration/nli-datefield-lib - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

assets/date-range-hover.png
assets/date-range-opened.png
assets/date-range-up.png
component/nli-datefield.ts
component/styles.css
component/template.html
controls/vo/DateFieldOptions.ts
controls/vo/DateRange.ts
core/ClickOutsideElement.ts
core/Lang.ts
core/ui.component.ts
core/WindowTools.ts
validators/date.range.validator.ts
validators/date.validator.ts

238

controls/calendar/Calendar.ts

@@ -1,14 +0,11 @@

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Output, EventEmitter, Input } from '@angular/core';
import {
CalendarWeek,
CalendarDay,
TimeControl } from './';
CalendarDay } from './';
import { DateFieldOptions } from '../vo/DateFieldOptions';
import { UIComponent } from '../../core/ui.component';
import { DateFormatter} from '../formatter';
import { DateUtils, } from '../utils';
export class Calendar{
export class Calendar extends UIComponent{
id:String;
id:String;

@@ -19,42 +16,25 @@ calendarWeeks:Array<CalendarWeek> = [];

timeControl:TimeControl;
centeredYearInYearSelection:number;
@Output()
public selectableYears:Array<any>;
@Output()
calendarEventEmitter: EventEmitter<String> = new EventEmitter<String>();
public options:any = {
currentDate:{year:new Date().getFullYear(), month:new Date().getMonth(), day:new Date().getDate()},
displayTime:false,
displayTimeWithSeconds:true
};
public selectableYears:Array<any>;
/* private _selectedDate:Date;
public set selectedDate(date:Date)
private _options:DateFieldOptions = new DateFieldOptions().getDefultOptions();
@Input()
public get options():DateFieldOptions
{
this._selectedDate = date;
this.currentDate = date;
return this._options;
}
public get selectedDate():Date
public set options(dateFieldOptions:DateFieldOptions)
{
return this._selectedDate;
}
*/
private _currentDate:Date;
this._options = dateFieldOptions;
}
private _currentDate:Date;
public set currentDate(date:Date)
{
this._currentDate = date;
/* if(this.timer){
this.timer.setHours(date.getHours());
this.timer.setMinutes(date.getMinutes());
this.timer.setSeconds(date.getSeconds());
} */
}
}

@@ -65,102 +45,73 @@ public get currentDate():Date

}
private _displayTimeWithSeconds:boolean = false;
public get displayTimeWithSeconds():boolean
{
return this._displayTimeWithSeconds;
constructor() {
super();
}
public set displayTimeWithSeconds(value:boolean)
{
this._displayTimeWithSeconds = value;
init() {
this.currentDate = this.options.currentDate;
this.create(this.currentDate);
this.calendarEventEmitter.emit("changeStateToDays");
}
constructor() {
this.timeControl = new TimeControl();
this.currentDate = new Date();
}
//FUNCTIONALITY /////////////////////////////////////////////
/**
* change the current year
*/
changeCurrentYear(year:number)
{
this.create(new Date(year, this.currentDate.getMonth(), 1));
//this.changeState(this.DAYS);
this.calendarEventEmitter.emit("changeStateToDays");
}
init() {
this.displayTimeWithSeconds = this.options.displayTimeWithSeconds;
this.create(this.currentDate);
this.calendarEventEmitter.emit("changeStateToDays");
}
/**
* Changethe current month
* @param month
*/
changeCurrentMonth(month:number)
{
this.create(new Date(this.currentDate.getFullYear(), month, 1));
//this.changeState(this.DAYS);
this.calendarEventEmitter.emit("changeStateToDays");
}
//FUNCTIONALITY /////////////////////////////////////////////
/**
* change the current year
*/
changeCurrentYear(year:number)
{
this.create(new Date(year, this.currentDate.getMonth(), 1));
//this.changeState(this.DAYS);
this.calendarEventEmitter.emit("changeStateToDays");
}
/**
* Changethe current month
* @param month
*/
changeCurrentMonth(month:number)
{
this.create(new Date(this.currentDate.getFullYear(), month, 1));
//this.changeState(this.DAYS);
this.calendarEventEmitter.emit("changeStateToDays");
}
/**
* Select a date
* @param calendarDay
*/
changeSelectedDate(calendarDay:CalendarDay)
{
if(calendarDay.isCurrentMonth){
//this.selectedDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), calendarDay.day, this.currentDate.getHours(), this.currentDate.getMinutes(), this.currentDate.getSeconds() );
/**
* Select a date
* @param calendarDay
*/
changeSelectedDate(calendarDay:CalendarDay)
{
if(calendarDay.isCurrentMonth){
this.calendarEventEmitter.emit("dateSelected");
this.calendarEventEmitter.emit("changeStateToDays");
//this.changeState(this.DAYS);
this.calendarEventEmitter.emit("close");
}
}
this.calendarEventEmitter.emit("changeStateToDays");
this.calendarEventEmitter.emit("close");
}
}
/**
* Change Year list that shown on the year selection
* @param year
*/
changeYearLists(year:number)
{
//this.state = this.DAYS;
this.createYearLists(year);
this.setSelectableYears(this.currentDate.getFullYear());
//this.state = this.YEARS;
}
/**
* Change Year list that shown on the year selection
* @param year
*/
changeYearLists(year:number, displayedYearCount:number)
{
this.createYearLists(year, displayedYearCount);
this.setSelectableYears(this.currentDate.getFullYear());
}
setSelectableYears(currentYear:number):Array<any>{
setSelectableYears(currentYear:number):Array<any>
{
this.selectableYears = [];
for (var index = 0; index < this.yearList.length; index++) {
this.selectableYears[this.selectableYears.length] = this.yearList[index];
}
return this.selectableYears;
}
this.selectableYears = [];
for (var index = 0; index < this.yearList.length; index++) {
//if((this.selectableYears[this.selectableYears.length-1]).length == 5){
// this.selectableYears[this.selectableYears.length] = [];
//}
//(this.selectableYears[this.selectableYears.length-1])[(this.selectableYears[this.selectableYears.length-1]).length] = this.yearList[index];
this.selectableYears[this.selectableYears.length] = this.yearList[index];
}
return this.selectableYears;
}
//TEST FUNCTIONS /////////////////////////////////////////////
refresh()
{
this.create(this.currentDate);
}
public create(date:Date)
{
public create(date:Date):void
{
if(date){
this.currentDate = date;
}else{
this.currentDate = this.options.currentDate;
}

@@ -189,6 +140,2 @@

}
//if(this.displayTime){
this.createTime();
//}
}

@@ -233,3 +180,2 @@ }

var calendarDay:CalendarDay = new CalendarDay();
//calendarDay.dayName = this.getDayName(dayIndex);
calendarDay.dayIndex = dayIndex;

@@ -241,3 +187,2 @@ calendarWeek.days[calendarWeek.days.length] = calendarDay;

}
//console.log("Calendar Weeks:", this.calendarWeeks);
}

@@ -287,3 +232,2 @@

addPreviousMonthDays(){

@@ -333,16 +277,9 @@ var month:number = (this.currentDate.getMonth() == 0)?11:this.currentDate.getMonth()-1;

createYearLists(year:number, displayedYearCount:number)
{
this.centeredYearInYearSelection = year;
createTime(){
this.timeControl = new TimeControl(this.currentDate);
this.timeControl.start();
}
createYearLists(year:number)
{
this.yearList = [];
this.yearList = [];
for (var index = 12; index > 0; index--) {
for (var index = (displayedYearCount-1)/2; index > 0; index--) {
this.yearList[this.yearList.length] = year - index;

@@ -353,3 +290,3 @@ }

for (var index = 1; index < 13; index++) {
for (var index = 1; index < ((displayedYearCount-1)/2) + 1; index++) {
this.yearList[this.yearList.length] = year + index;

@@ -359,5 +296,2 @@ }

}

1

controls/calendar/index.ts
export { CalendarDay } from './CalendarDay'
export { CalendarWeek } from './CalendarWeek'
export { TimeControl } from './TimeControl'
export { Calendar } from './Calendar'

15

controls/formatter/date.formatter.ts

@@ -6,2 +6,4 @@ export class DateFormatter {

private static timeFormat:string = "HH:MM";
static DEFAULT_DATE_FORMATS = {

@@ -47,2 +49,15 @@ parse: {

static getFormattedTime(date:Date, timeFormat:String):string
{
if(!timeFormat){
timeFormat = this.timeFormat;
}
if(date){
if(timeFormat == "HH:MM"){
return this.addSecondNumberIfNotExist(date.getHours())+":"+this.addSecondNumberIfNotExist(date.getMinutes());
}
}
return "";
}
static addSecondNumberIfNotExist(number:number):String

@@ -49,0 +64,0 @@ {

2

controls/index.ts
export { CalendarDay, CalendarWeek, TimeControl } from './calendar/index';
export { CalendarDay, CalendarWeek } from './calendar/index';
export { Calendar } from './calendar/Calendar';
export { DateFormatter } from './formatter/index';
export { DateUtils } from './utils/index';

298

controls/utils/DateUtils.ts

@@ -0,7 +1,114 @@

import { Lang } from "../../core/Lang";
import { DateRange } from "../vo/DateRange";
export class DateUtils {
//MONTHS
public static JANUAR:String = "Januar";
public static FEBRUAR:String = "Februar";
public static MARCH:String = "March";
public static APRIL:String = "April";
public static MAY:String = "May";
public static JUNE:String = "June";
public static JULY:String = "July";
public static AUGUST:String = "August";
public static SEPTEMBER:String = "September";
public static OCTOBER:String = "October";
public static NOVEMBER:String = "November";
public static DECEMBER:String = "December";
//DAYS
public static MONDAY:String = "Monday";
public static TUESDAY:String = "Tuesday";
public static WEDNESDAY:String = "Wednesday";
public static THURSDAY:String = "Thursday";
public static FRIDAY:String = "Friday";
public static SATURDAY:String = "Saturday";
public static SUNDAY:String = "Sunday";
//STATES
public static ACTIVE:String = "active-day";
public static PASSIVE:String = "passive-day";
public static START_OF_RANGE:String = "start-of-range";
public static END_OF_RANGE:String = "end-of-range";
public static START_AND_END_OF_RANGE:String = "start-and-end-of-range";
public static DAY_IN_RANGE:String = "day-in-range";
public static DAY_IS_TODAY:String = "day-is-today";
public static DAY_IS_SELECTED_DAY:String = "selected-day";
public static dayNames:Array<string> = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
public static monthNames:Array<string> = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
//ERRORS
public static ERROR_RANGE_CAN_NOT_USED_IN_FILTER_MODE:String = "ERROR_RANGE_CAN_NOT_USED_IN_FILTER_MODE";
public static ERROR_DATE_IS_NOT_VALID:String = "ERROR_DATE_IS_NOT_VALID";
public static ERROR_DATE_IS_PASST:String = "ERROR_DATE_IS_PASST";
public static ERROR_DATE_IS_FUTURE:String = "ERROR_DATE_IS_FUTURE";
public static ERROR_DATE_IS_NOT_SELECTABLE_RANGE:String = "ERROR_DATE_IS_NOT_SELECTABLE_RANGE";
public static ERROR_DATE_IS_NOT_SELECTED_RANGE:String = "ERROR_DATE_IS_NOT_SELECTED_RANGE";
public static ERROR_DATE_COULD_NOT_FOUND:String = "ERROR_DATE_COULD_NOT_FOUND";
public static ERROR_VALUE_NOT_DEFINED:String = "ERROR_VALUE_NOT_DEFINED";
//CONSTANS
public static MONTHS:string = 'months';
public static YEARS:string = 'years';
public static DAYS:string = "days";
//LABELS
public static TIME_SPAN:string = 'time-span';
public static FROM:string = 'from';
public static TO:string = "to";
public static WHOLE_TIME_SPAN:String = DateRange.WHOLE_TIME_SPAN;
public static TODAY:String = DateRange.TODAY;
public static YESTERDAY:String = DateRange.YESTERDAY;
public static LAST_SEVEN_DAYS:String = DateRange.LAST_SEVEN_DAYS;
public static LAST_THIRTY_DAYS:String = DateRange.LAST_THIRTY_DAYS;
public static INDIVIDUALLY:String = DateRange.INDIVIDUALLY;
public static lang:Lang;
public static get dayNames():Array<any> {
var array:Array<any> = [ this.lang.get(this.MONDAY).substring(0, 2),
this.lang.get(this.TUESDAY).substring(0, 2),
this.lang.get(this.WEDNESDAY).substring(0, 2),
this.lang.get(this.THURSDAY).substring(0, 2),
this.lang.get(this.FRIDAY).substring(0, 2),
this.lang.get(this.SATURDAY).substring(0, 2),
this.lang.get(this.SUNDAY).substring(0, 2)
];
return array;
}
public static get monthNames():Array<any> {
var array:Array<any> = [ this.lang.get(this.JANUAR),
this.lang.get(this.FEBRUAR),
this.lang.get(this.MARCH),
this.lang.get(this.APRIL),
this.lang.get(this.MAY),
this.lang.get(this.JUNE),
this.lang.get(this.JULY),
this.lang.get(this.AUGUST),
this.lang.get(this.SEPTEMBER),
this.lang.get(this.OCTOBER),
this.lang.get(this.NOVEMBER),
this.lang.get(this.DECEMBER)
];
return array;
}
public static get monthList():Array<any> {
var array:Array<any> = Array<any>();
array[0] = [{index:0, label:DateUtils.monthNames[0], key:DateUtils.monthNames[0].substring(0,3)},
{index:1, label:DateUtils.monthNames[1], key:DateUtils.monthNames[1].substring(0,3)},
{index:2, label:DateUtils.monthNames[2], key:DateUtils.monthNames[2].substring(0,3)}];
array[1] = [{index:3, label:DateUtils.monthNames[3], key:DateUtils.monthNames[3].substring(0,3)},
{index:4, label:DateUtils.monthNames[4], key:DateUtils.monthNames[4].substring(0,3)},
{index:5, label:DateUtils.monthNames[5], key:DateUtils.monthNames[5].substring(0,3)}];
array[2] = [{index:6, label:DateUtils.monthNames[6], key:DateUtils.monthNames[6].substring(0,3)},
{index:7, label:DateUtils.monthNames[7], key:DateUtils.monthNames[7].substring(0,3)},
{index:8, label:DateUtils.monthNames[8], key:DateUtils.monthNames[8].substring(0,3)}];
array[3] = [{index:9, label:DateUtils.monthNames[9], key:DateUtils.monthNames[9].substring(0,3)},
{index:10, label:DateUtils.monthNames[10], key:DateUtils.monthNames[10].substring(0,3)},
{index:11, label:DateUtils.monthNames[11], key:DateUtils.monthNames[11].substring(0,3)}];
return array;
}
public static daysInThisMonth(date:Date) {

@@ -17,3 +124,186 @@ return new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();

}
public static getDateFromString(dateString:String):Date {
if(dateString && dateString.split(".").length == 3){
return new Date(Number(dateString.split(".")[2]),Number(dateString.split(".")[1])-1,Number(dateString.split(".")[0]));
}
}
public static getDateTimeFromString(dateTimeString:String):Date {
if(dateTimeString && dateTimeString.split(".").length == 3 && dateTimeString.split(":").length == 2){
var dateTimeStringArray = dateTimeString.split(" ");
var dateStringArray = (dateTimeStringArray[0]).split(".");
var timeStringArray = (dateTimeStringArray[1]).split(":");
return new Date(Number(dateStringArray[2]),Number(dateStringArray[1])-1,Number(dateStringArray[0]), Number(timeStringArray[0]), Number(timeStringArray[1]));
}
}
public static convertStringToDate(value:String):Date
{
var date:Date;
if(value.indexOf(".") == -1 && value.indexOf("/") == -1){
if(value.length == 8){
date = new Date(Number(value.substring(4, 8)), Number(value.substring(2, 4))-1, Number(value.substring(0, 2)));
}else if(value.length == 6){
date = new Date(Number("20"+value.substring(4, 6)), Number(value.substring(2, 4))-1, Number(value.substring(0, 2)));
}
}else{
if(value.indexOf(".") != -1 && value.split(".").length == 3){
date = new Date(Number(value.split(".")[2]), Number(value.split(".")[1])-1, Number(value.split(".")[0]));
}else if(value.indexOf("/") != -1 && value.split("/").length == 3){
date = new Date(Number(value.split("/")[2]), Number(value.split("/")[1])-1, Number(value.split("/")[0]));
}
}
return date;
}
public static formatStringToDateString(value:String):String
{
var formattedString:String = "";
if(value.indexOf(".") == -1 && value.indexOf("/") == -1){
if(value.length == 8){
formattedString = value.substring(0, 2) +"."+ value.substring(2, 4) +"."+ value.substring(4, 8);
}else if(value.length == 6){
formattedString = value.substring(0, 2) +"."+ value.substring(2, 4) +"."+ "20"+value.substring(4, 6);
}
}else{
if(value.indexOf("/") != -1 && value.split("/").length == 3){
formattedString = value.split("/")[0] +"."+ value.split("/")[1] +"."+ value.split("/")[2];
}
}
return formattedString;
}
public static formatStringToTimeString(value:String):String
{
var formattedString:String = "";
if(value.indexOf(":") == -1){
if(value.length == 4){
formattedString = value.substring(0, 2) +":"+ value.substring(2, 4);
}
}else{
if(value.indexOf(".") != -1){
formattedString = value.split(".")[0] +":"+ value.split(".")[1];
}
}
return formattedString;
}
public static isThatFormattedDateString(value:String):Boolean
{
if(value.length == 10 && value.split(".").length == 3){
return true;
}else{
return false;
}
}
public static isThatFormattedTimeString(value:String):Boolean
{
if(value.length == 5 && value.split(":").length == 2){
return true;
}else{
return false;
}
}
public static isDate(date:Date):Boolean {
return Boolean(date);
}
public static today():Date{
return new Date();
}
public static getDefaultLabels(locale:String){
var labels:Array<any> = [];
if(locale == "en-US"){
labels[labels.length] = {key:DateUtils.ERROR_RANGE_CAN_NOT_USED_IN_FILTER_MODE, label:"Selectable range can not used in filter mode"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_VALID, label:"Date is not valid"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_PASST, label:"Date is in the past"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_FUTURE, label:"Date is in the future"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_SELECTABLE_RANGE, label:"Date is not in the selectable range"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_SELECTED_RANGE, label:"Date is not in the selected range"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_COULD_NOT_FOUND, label:"Date could not found"};
labels[labels.length] = {key:DateUtils.ERROR_VALUE_NOT_DEFINED, label:"Date is required"};
labels[labels.length] = {key:DateUtils.JANUAR, label:"Januar"};
labels[labels.length] = {key:DateUtils.FEBRUAR, label:"Februar"};
labels[labels.length] = {key:DateUtils.MARCH, label:"March"};
labels[labels.length] = {key:DateUtils.APRIL, label:"April"};
labels[labels.length] = {key:DateUtils.MAY, label:"May"};
labels[labels.length] = {key:DateUtils.JUNE, label:"June"};
labels[labels.length] = {key:DateUtils.JULY, label:"July"};
labels[labels.length] = {key:DateUtils.AUGUST, label:"August"};
labels[labels.length] = {key:DateUtils.SEPTEMBER, label:"September"};
labels[labels.length] = {key:DateUtils.OCTOBER, label:"October"};
labels[labels.length] = {key:DateUtils.NOVEMBER, label:"November"};
labels[labels.length] = {key:DateUtils.DECEMBER, label:"December"};
labels[labels.length] = {key:DateUtils.MONDAY, label:"Monday"};
labels[labels.length] = {key:DateUtils.TUESDAY, label:"Tuesday"};
labels[labels.length] = {key:DateUtils.WEDNESDAY, label:"Wednesday"};
labels[labels.length] = {key:DateUtils.THURSDAY, label:"Thursday"};
labels[labels.length] = {key:DateUtils.FRIDAY, label:"Friday"};
labels[labels.length] = {key:DateUtils.SATURDAY, label:"Saturday"};
labels[labels.length] = {key:DateUtils.SUNDAY, label:"Sunday"};
labels[labels.length] = {key:DateUtils.TIME_SPAN, label:"Select a time span:"};
labels[labels.length] = {key:DateUtils.FROM, label:"From:"};
labels[labels.length] = {key:DateUtils.TO, label:"To:"};
labels[labels.length] = {key:DateUtils.WHOLE_TIME_SPAN, label:"Whole time span"};
labels[labels.length] = {key:DateUtils.TODAY, label:"Today"};
labels[labels.length] = {key:DateUtils.YESTERDAY, label:"Yesterday"};
labels[labels.length] = {key:DateUtils.LAST_SEVEN_DAYS, label:"Last 7 days"};
labels[labels.length] = {key:DateUtils.LAST_THIRTY_DAYS, label:"Last 30 days"};
labels[labels.length] = {key:DateUtils.INDIVIDUALLY, label:"Individually"};
}else if(locale == "de-DE"){
labels[labels.length] = {key:DateUtils.ERROR_RANGE_CAN_NOT_USED_IN_FILTER_MODE, label:"Erlaubte Zeitraum kann nicht in Filter-Mode verwendet werden"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_VALID, label:"Datum ist nicht gültig"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_PASST, label:"Datum liegt in Vergangenheit"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_FUTURE, label:"Datum liegt in Zukunft"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_SELECTABLE_RANGE, label:"Datum ist nicht in erlaubte Zeitraum"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_IS_NOT_SELECTED_RANGE, label:"Datum liegt nicht in ausgewählte Zeitraum"};
labels[labels.length] = {key:DateUtils.ERROR_DATE_COULD_NOT_FOUND, label:"Datum kann nciht gefunden werden"};
labels[labels.length] = {key:DateUtils.ERROR_VALUE_NOT_DEFINED, label:"Sie müssen ein Datum auswählen"};
labels[labels.length] = {key:DateUtils.JANUAR, label:"Januar"};
labels[labels.length] = {key:DateUtils.FEBRUAR, label:"Februar"};
labels[labels.length] = {key:DateUtils.MARCH, label:"März"};
labels[labels.length] = {key:DateUtils.APRIL, label:"April"};
labels[labels.length] = {key:DateUtils.MAY, label:"Mai"};
labels[labels.length] = {key:DateUtils.JUNE, label:"Juni"};
labels[labels.length] = {key:DateUtils.JULY, label:"Juli"};
labels[labels.length] = {key:DateUtils.AUGUST, label:"August"};
labels[labels.length] = {key:DateUtils.SEPTEMBER, label:"September"};
labels[labels.length] = {key:DateUtils.OCTOBER, label:"Oktober"};
labels[labels.length] = {key:DateUtils.NOVEMBER, label:"November"};
labels[labels.length] = {key:DateUtils.DECEMBER, label:"Dezember"};
labels[labels.length] = {key:DateUtils.MONDAY, label:"Montag"};
labels[labels.length] = {key:DateUtils.TUESDAY, label:"Dienstag"};
labels[labels.length] = {key:DateUtils.WEDNESDAY, label:"Mittwoch"};
labels[labels.length] = {key:DateUtils.THURSDAY, label:"Donnerstag"};
labels[labels.length] = {key:DateUtils.FRIDAY, label:"Freitag"};
labels[labels.length] = {key:DateUtils.SATURDAY, label:"Samstag"};
labels[labels.length] = {key:DateUtils.SUNDAY, label:"Sonntag"};
labels[labels.length] = {key:DateUtils.TIME_SPAN, label:"Zeitraum auswählen:"};
labels[labels.length] = {key:DateUtils.FROM, label:"Von:"};
labels[labels.length] = {key:DateUtils.TO, label:"Bis:"};
labels[labels.length] = {key:DateUtils.WHOLE_TIME_SPAN, label:"Gesampter Zeitraum"};
labels[labels.length] = {key:DateUtils.TODAY, label:"Heute"};
labels[labels.length] = {key:DateUtils.YESTERDAY, label:"Gestern"};
labels[labels.length] = {key:DateUtils.LAST_SEVEN_DAYS, label:"Letzte 7 Tage"};
labels[labels.length] = {key:DateUtils.LAST_THIRTY_DAYS, label:"Letzte 30 Tage"};
labels[labels.length] = {key:DateUtils.INDIVIDUALLY, label:"Individuell"};
}
return labels;
}
}

14

datefield.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NLIDatefield } from './nli-datefield.component';
import { NLIDatefield } from './component/nli-datefield';
import { ClickOutsideElement } from './core/ClickOutsideElement';
import { LibModule as NliInputModule} from '@next-level-integration/nli-input-lib';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
NLIDatefield
NLIDatefield,
ClickOutsideElement
],
imports: [
CommonModule,
NliInputModule
NliInputModule,
FormsModule,
ReactiveFormsModule
],

@@ -20,2 +24,2 @@ exports: [NLIDatefield],

})
export class NLIDateFieldModule { }
export class NLIDateFieldModule {}

19

package.json
{
"name": "@next-level-integration/nli-datefield-lib",
"version": "0.0.4",
"description": "This module contents datefield component.",
"version": "0.0.5",
"description": "NLI-Datefield component",
"main": "",

@@ -9,9 +9,18 @@ "scripts": {

},
"repository": {
"type": "git",
"url": "git+https://github.com/sdtyn/nli-lib.git"
},
"dependencies": {
"@next-level-integration/nli-input-lib": "^1.0.0"
"@next-level-integration/nli-input-lib": "2.0.11"
},
"keywords": [
"datefield","datepicker", "date", "datumsfeld", "datum", "date-picker"
"datefield"
],
"license": "MIT"
"author": "Sedat Yeni <syeni@next-level-integration.com> (https://github.com/sdtyn)",
"license": "MIT",
"bugs": {
"url": "https://github.com/sdtyn/nli-lib/issues"
},
"homepage": "https://github.com/sdtyn/nli-lib#readme"
}

119

README.md
# NLIDateField
### Angular Date Picker
The general structure of this component:
### Description
<nli-datefield [configs]="options"
label="Date"
[selectedDate]="date"></nli-datefield>
Compatible with Angular5 version.
configs:
public options:any = {
currentDate:{year:new Date().getFullYear(), month:new Date().getMonth(), day:new Date().getDate()},
displayTime:false, //implemented not yet
displayTimeWithSeconds:false // implemented not yet
};
Online demo is here
### Setup Steps:
1. Add dependency in package.json under dependencies object:
`"@next-level-integration/nli-datefield": "{version}"`
### Installation
To install this component to an external project, follow the procedure:
2. Run npm install in project folder (The home folder that `package.json` exists):
`npm install`
This command downloads all dependencies including @next-level-integration/nli-datefield. You can also download just this module with:
`npm install @next-level-integration/nli-datefield`
1. npm install nli-datefield --save
2. Run npm install in project folder (The home folder that `package.json` exists): `npm install` This command downloads all dependencies including `@next-level-integration/nli-datefield`. You can also download just this module with: npm install `@next-level-integration/nli-datefield`
5. Import input module to your project. In your main module (or module that you want use this component) that its default name is `app.module.ts`, import it:
import { NLIDateFieldModule } from '@next-level-integration/nli-datefield/datefield.module';
import { NLIDateFieldModule } from '@next-level-integration/nli-datefield/datefield.module';
...

@@ -40,7 +31,87 @@ @NgModule({

4. Add the following snippet inside your template:
### Usage example:
<nli-datefield [configs]="options"
label="Date"
[selectedDate]="tomorrow"
(changed)="onChange($event)"></nli-datefield>
<div style="width:100%; height:100%;">
<nli-datefield [configs]="options" label="Datum" [selectedDate]="tomorrow"></nli-datefield>
</div>
### Attributes
Value of the options attribute is a type of DateFieldOptions. It can contain the following properties.
| Option | Default | Type | Description |
| :------------- |:-------------| :-----| :-----------|
| currentDate | Today | Date | Default is displayed the date on Date picker |
| selectableRange | new DateRange(null, null) | DateRange | Selectable date span |
| filterMode | false | Boolean | The range picker is activated with this option |
| selectedRange | new DateRange(null, null) | DateRange | If filterMode activated, then you can select a default range on range picker. |
| locale | "en-US" | String | It supports german and english for now |
| labels | null | Array | If you want to translate the labels you can use this option. Usage: [{key:KEY, label:"LABEL"}]. |
| required | false | Boolean | If the date is required |
| readOnly | false | Boolean | If the date picker is readOnly |
Example of the options data (not all properties listed):
var labels:Array<any> = [{key:DateUtils.ERROR_DATE_IS_NOT_SELECTABLE_RANGE, label:"Das Mindestalter für einen Vertragsabschluss ist 18 Jahre."}];
public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(2000, 1, 1), new DateRange(null, new Date(1999, 11, 31)), null, "de-DE", labels, false, false);
### Callbacks
##### changed:
called when the date is selected, removed or input field typing is valid or on range picker a date range is selected.
### Examples
##### 1. Default date picker
in Template:
<nli-datefield classes="width-120"[configs]="options"
label="Datum"
[selectedDate]="tomorrow"
(changed)="onChange($event)"></nli-datefield>
in your component:
public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(), new DateRange(null, null), null, "de-DE", null, true, false);
##### 2. Date picker with selectable range
in Template:
<nli-datefield [configs]="options"
label="Geburtsdatum"
[selectedDate]="null"
(changed)="onChange($event)"></nli-datefield>
in your component:
public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(2017, 5, 5), new DateRange(new Date(2018, 8, 6), new Date(2018, 8, 16)), null, "de-DE", null, true, true);
##### 3. Range picker
in Template:
<nli-datefield classes="width-250"
[configs]="options"
label="Select a range"
(changed)="onChange($event)"></nli-datefield>
in your component:
public options:DateFieldOptions = new DateFieldOptions().setOptions(true, new Date(), null, null, "en-US", null, false, false);
### Compatibility (tested with)
Firefox (latest)
Chrome (latest)
Opera (latest)
Edge
IE11
controls/calendar/TimeControl.ts
nli-datefield.component.css
nli-datefield.component.html
nli-datefield.component.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc