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

Comparing version 0.0.4 to 0.0.5

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 @@ }
 
-
-
-
 }

controls/calendar/index.ts

 export { CalendarDay } from './CalendarDay'
 export { CalendarWeek } from './CalendarWeek'
-export { TimeControl } from './TimeControl'
 export { Calendar } from './Calendar'

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 @@ {

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';

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;
+    }
+    
 }

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 {}

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 <[e-mail]> (https://github.com/sdtyn)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sdtyn/nli-lib/issues"
+  },
+  "homepage": "https://github.com/sdtyn/nli-lib#readme"
 }

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128429

increased by78.47%

Number of package files

30

increased by50%

Lines of code

2589

increased by74.93%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

117

increased by160%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@next-level-integration/nli-input-lib@2.0.11(transitive)

• - Removed@next-level-integration/nli-input-lib@1.1.0(transitive)

• Updated@next-level-integration/nli-input-lib@2.0.11