nscomponentsreact/build/generated/js/nsCalendar.min.js

React Wrapper Components for NSComponents

var nsModuleExport = function(root,name,prototype)
	{
		if(typeof exports === 'object' && typeof module === 'object')
		{
			module.exports[name] = prototype;
		}
		else if (typeof define === "function" && define.amd)
		{
			define(name,[], function () {return prototype;});
		}
		else if(typeof exports === 'object')
		{
			exports[name] = prototype;
		}
		else
		{
			root[name] = prototype;
		}
	};var nsIsWeb = function(root)
	{
		if(typeof exports === 'object' && typeof module === 'object')
		{
			return false;
		}
		else if (typeof define === "function" && define.amd)
		{
			return false;
		}
		else if(typeof exports === 'object')
		{
			return false;
		}
		else
		{
			return true;
		}
	};if(!nsIsWeb())
		{
var nsutilRef = require('./nsUtil.min.js');
var NSUtil = nsutilRef.NSUtil;
var nscontainerbaseRef = require('./nsContainerBase.min.js');
var nsExtendPrototype = nscontainerbaseRef.nsExtendPrototype;
var NSContainerBase = nscontainerbaseRef.NSContainerBase;
var svgRef = require('./nsSVG.min.js');
var NSSvg = svgRef.NSSvg;
var NSSvgShapes = svgRef.NSSvgShapes;
var plugginsRef = require('./nsPluggins.min.js');
var nsTextEditor = plugginsRef.nsTextEditor;
var nsTextAreaEditor = plugginsRef.nsTextAreaEditor;
var NSCellSelection = plugginsRef.NSCellSelection;
var NSTableCellNavigator = plugginsRef.NSTableCellNavigator;
var dateutilRef = require('./nsDateUtil.min.js');
var NSDateUtil = dateutilRef.NSDateUtil;

		}
var NSCalendar = (function()
{
	function NSCalendar(component,setting) 
	{
		this.__setting = setting;
		
		this.__context = window;
		this.__inputDateFormat = "MM/dd/yyyy";
		this.__minDate = null;
		this.__maxDate = null;
		this.__selectedDate = null;
		this.__buttonSetting = {prev:{html:null,cssClass:null},next:{html:null,cssClass:null}, savetime: {html:null,cssClass:null}, canceltime: {html:null,cssClass:null}};
		this.__customClass = {container:null,headerContainer:null,prevButton:null,nextButton:null,monthDropdown:null,yearDropdown:null,weekContainer:null,week:null,dayContainer:null,day:null,footerContainer:null};
		this.__monthValueName = null;
		this.__monthTextName = null;
		this.__weekName = null;
		this.__markDayDisabled = null;
		this.__showFooter = false;
		this.__footerContent = null;
		this.__width = null;
		this.__cellWidth = null;
		
		this.__divContainer = null;
		this.__divHeaderContainer = null;
		this.__cmbMonth = null;
		this.__cmbYear = null;
		this.__divWeekContainer = null;
		this.__divDayContainer = null;
		this.__divDayBody = null;
		this.__divTimeContainer = null;
		this.__divFooterContainer = null;
		this.__arrYear = [];
		this.__lastSelectedCell = null;
		this.__arrDayCells = []; 
		this.__minWidth = 240;
		this.__minCellWidth = 32;
		this.__showTime = false;
		this.__timeSetting = {minHour: 0, maxHour: 23, minMinute: 0, maxMinute: 59, showSeconds: false, minSecond: 0, maxSecond: 59};
		
		this.__dayClickHandlerRef = null;
		
		this.base.__setBaseComponent.call(this,component);
	};
	nsExtendPrototype(NSContainerBase,NSCalendar);
	NSCalendar.prototype.varructor = NSCalendar;
	
	NSCalendar.prototype.initializeComponent = function() 
	{
		this.base.initializeComponent.call(this);
		this.__setSetting();
		this.__initDefault();
		this.__injectClass();
		this.__createComponent();
	};
	
	NSCalendar.prototype.setComponentProperties = function() 
	{
		this.base.setComponentProperties.call(this);
	};
	
	NSCalendar.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)
	{
		var attributeName = attrName.toLowerCase();
		this.base.propertyChange.call(this,attrName, oldVal, newVal, setProperty);
	};
	
	NSCalendar.prototype.removeComponent = function() 
	{
		this.base.removeComponent.call(this);
	};
	
	NSCalendar.prototype.componentResized = function(event) 
	{
		this.base.componentResized.call(this,event);
	};
	
	NSCalendar.prototype.getSelectedDate = function() 
	{
		return this.__selectedDate;
	};
	
	NSCalendar.prototype.getSelectedDateAsString = function(format) 
	{
		if(this.__selectedDate)
		{
			var nsDateUtil = new NSDateUtil();
			return nsDateUtil.format(this.__selectedDate,format);
		}
		return null;
	};
	
	NSCalendar.prototype.setSelectedDate = function(date,format,fireEvent) 
	{
		this.__selectedDate = this.__formatInputDate(date,format);
		this.__updateDaysInControl(this.__selectedDate);
		if(this.util.isUndefinedOrNull(fireEvent) || fireEvent)
		{
			this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTED,this.__selectedDate,{date:this.__selectedDate});
		}
	};
	
	NSCalendar.prototype.setYear = function(year) 
	{
		this.__setYearDropdown(year);
		this.__dropDownChangeHandler();
		this.__cmbMonth.selectedIndex = monthDate.getMonth();
	};
	
	NSCalendar.prototype.setMonth = function(month) 
	{
		this.__cmbMonth.selectedIndex = month;
		this.__dropDownChangeHandler();
	};
	
	NSCalendar.prototype.reset = function() 
	{
		this.__selectedDate = null;
		var todayDate = new Date();
		var date = this.__maxDate < todayDate ? this.__maxDate : todayDate;
		this.__updateDaysInControl(date);
		this.__resetTimeInControl();
	};
	
	NSCalendar.prototype.setTodayDate = function(fireEvent) 
	{
		this.__selectedDate = new Date();
		this.__updateDaysInControl(this.__selectedDate);
		if(this.util.isUndefinedOrNull(fireEvent) || fireEvent)
		{
			//for some reason __selectedDate time part is getting reset mostly in this.__updateDayCell function that is why resetting the date back
			if(this.__showTime) {
				this.__selectedDate = this.__setTimePartInDate(this.__selectedDate);
			}
			this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTED,this.__selectedDate,{date:this.__selectedDate});
		}
	};
	
	NSCalendar.prototype.__initDefault = function()
	{
		if(!this.__minDate)
		{
			this.__minDate = new Date();
			this.__minDate = this.__getDateObject(this.__minDate.getFullYear() - 15,0,1);
		}
		if(!this.__maxDate)
		{
			this.__maxDate = new Date();
			this.__maxDate = this.__getDateObject(this.__maxDate.getFullYear() + 15,0,1);
		}
		if(!this.__monthValueName || this.__monthValueName.length === 0)
		{
			this.__monthValueName = ["January","Febuary","March","April","May","June","July","August","September","October","November","December"];
		}
		if(!this.__monthTextName || this.__monthTextName.length === 0)
		{
			this.__monthTextName = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
		}
		if(!this.__weekName || this.__weekName.length === 0)
		{
			this.__weekName = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
		}
	};
	
	NSCalendar.prototype.__injectClass = function()
	{
		if(this.__width && this.__width > this.__minWidth)
		{
			this.util.addCSSClassInDOM(["#" + this.getID() + ".nsCalendar"],["width:" + this.__width + "px;"]);
			if(!this.__cellWidth)
			{
				this.__cellWidth = Math.floor(this.__width / 7);
			}
		}
		if(this.__cellWidth && this.__cellWidth > this.__minCellWidth)
		{
			this.util.addCSSClassInDOM(["#" + this.getID() + ".nsCalendar .nsCalendarWeek"],["width:" + this.__cellWidth + "px;"]);
			this.util.addCSSClassInDOM(["#" + this.getID() + ".nsCalendar .nsCalendarDayContainerCell"],["width:" + this.__cellWidth + "px;"]);
		}
	};
	
	NSCalendar.prototype.__setSetting = function()
	{
		if(!this.__setting)
		{
			this.__setting = {};
		}
		var setting = this.__setting;
		if(setting)
		{
			if(setting.hasOwnProperty("context"))
			{
				this.__context = setting["context"];
			}
			if(setting.hasOwnProperty("inputDateFormat"))
			{
				this.__inputDateFormat = setting["inputDateFormat"];
			}
			if(setting.hasOwnProperty("minDate"))
			{
				this.__minDate = this.__formatInputDate(setting["minDate"]);
			}
			if(setting.hasOwnProperty("maxDate"))
			{
				this.__maxDate = this.__formatInputDate(setting["maxDate"]);
			}
			if(setting.hasOwnProperty("selectedDate"))
			{
				this.__selectedDate = this.__formatInputDate(setting["selectedDate"]);
			}
			if(setting.hasOwnProperty("monthValueName"))
			{
				this.__monthValueName = setting["monthValueName"];
			}
			if(setting.hasOwnProperty("monthTextName"))
			{
				this.__monthTextName = setting["monthTextName"];
			}
			if(setting.hasOwnProperty("weekName"))
			{
				this.__weekName = setting["weekName"];
			}
			if(setting.hasOwnProperty("markDayDisabled"))
			{
				this.__markDayDisabled =  setting["markDayDisabled"];
				this.__markDayDisabled = this.util.getFunction(this.__markDayDisabled,this.__context);
			}
			if(setting.hasOwnProperty("width"))
			{
				this.__width = Number(setting["width"]);
				if(isNaN(this.__width))
				{
					this.__width = null;
				}
			}
			if(setting.hasOwnProperty("cellWidth"))
			{
				this.__cellWidth = Number(setting["cellWidth"]);
				if(isNaN(this.__cellWidth))
				{
					this.__cellWidth = null;
				}
			}
			if(setting.hasOwnProperty("showFooter"))
			{
				this.__showFooter = Boolean.parse(setting["showFooter"]);
			}
			if(setting.hasOwnProperty("showTime")) 
			{
				this.__showTime = Boolean.parse(setting["showTime"]); 
				// or simply: this.__showTime = !!setting["showTime"];
			}
			if(setting.hasOwnProperty("timeSetting") && setting["timeSetting"]) 
			{
				this.__timeSetting = {...this.__timeSetting, ...setting["timeSetting"]}; 
			}
			if(setting.hasOwnProperty("footerContent"))
			{
				this.__footerContent = setting["footerContent"];
			}
			if(this.__showFooter)
			{
				this.__createFooter();
				this.__baseComponent.appendChild(this.__divFooterContainer);
			}
			if(setting.hasOwnProperty("theme"))
			{
				this.__theme = setting["theme"];
			}
			var buttonSetting = {};
			if(setting.hasOwnProperty("buttonSetting"))
			{
				buttonSetting = setting["buttonSetting"];
			}
			if(!buttonSetting)
			{
				buttonSetting = {};
			}
			if(!buttonSetting.prev)
			{
				buttonSetting.prev = {html:null,cssClass:null};
			}
			if(!buttonSetting.prev.html)
			{
				buttonSetting.prev.html = "<svg height=\"24\" version=\"1.1\" viewbox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"nsCalendarIcon nsCalendarHeaderButtonSvg\">\r\n" + 
											"<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\"></path>\r\n" + 
										  "</svg>";
			}
			if(!buttonSetting.next)
			{
				buttonSetting.next = {html:null,cssClass:null};
			}
			if(!buttonSetting.next.html)
			{
				buttonSetting.next.html = "<svg height=\"24\" version=\"1.1\" viewbox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"nsCalendarIcon nsCalendarHeaderButtonSvg\">\r\n" + 
											"<path d=\"M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z\"></path>\r\n" + 
										  "</svg>";
			}
			if(!buttonSetting.savetime)
			{
				buttonSetting.savetime = {html:null,cssClass:null};
			}
			if(!buttonSetting.savetime.html)
			{
				buttonSetting.savetime.html = `<svg 
													viewBox="0 0 24 24" 
													fill="none" 
													stroke="currentColor" 
													stroke-width="2" 
													stroke-linecap="round" 
													stroke-linejoin="round"
													class="nsCalendarIcon nsCalendarIconTime nsCalendarIconTimeSave"
													>
													<!-- Circle -->
													<circle cx="12" cy="12" r="10"></circle>
													<!-- Checkmark -->
													<path d="M9 12l2 2 4-4"></path>
												</svg>`;
			}
			if(!buttonSetting.canceltime)
			{
				buttonSetting.canceltime = {html:null,cssClass:null};
			}
			if(!buttonSetting.canceltime.html)
			{
				buttonSetting.canceltime.html = `<svg 
													viewBox="0 0 24 24" 
													fill="none" 
													stroke="currentColor" 
													stroke-width="2" 
													stroke-linecap="round" 
													stroke-linejoin="round"
													class="nsCalendarIcon nsCalendarIconTime nsCalendarIconTimeCancel"
													>
													<!-- Circle -->
													<circle cx="12" cy="12" r="10"></circle>
													<!-- Cross (X) -->
													<line x1="9" y1="9" x2="15" y2="15"></line>
													<line x1="15" y1="9" x2="9" y2="15"></line>
													</svg>`;
			}
			this.__buttonSetting = {prev:{html:buttonSetting.prev.html,cssClass:buttonSetting.prev.cssClass},
								  	next:{html:buttonSetting.next.html,cssClass:buttonSetting.next.cssClass},
									savetime: {html:buttonSetting.savetime.html,cssClass:buttonSetting.savetime.cssClass},
									canceltime: {html:buttonSetting.canceltime.html,cssClass:buttonSetting.canceltime.cssClass}
								    };
			
			var customClass = {};
			if(setting.hasOwnProperty("customClass"))
			{
				customClass = setting["customClass"];
			}
			if(!customClass)
			{
				customClass = {};
			}
			for(var prop in this.__customClass)
			{
				this.__customClass[prop] = (customClass[prop] || null);
			}
		}
	};
	
	NSCalendar.prototype.__createComponent = function()
	{
		this.util.addStyleClass(this.__baseComponent,"nsCalendar");
		this.__applyTheme(this.__baseComponent,"nsCalendar");
		this.__divContainer = this.util.createDiv(this.getID() + "container","nsCalendarContainer");
		this.__applyCustomClass(this.__divContainer,"container");
		
		this.__createHeader();
		this.__divContainer.appendChild(this.__divHeaderContainer);
		this.__createWeek();
		this.__divContainer.appendChild(this.__divWeekContainer);
		this.__createDays();
		this.__divContainer.appendChild(this.__divDayContainer);
		if(this.__showTime) {
			this.__createTimePart();
			this.__divContainer.appendChild(this.__divTimeContainer);
		}
		this.__baseComponent.appendChild(this.__divContainer);
		if(this.__showFooter)
		{
			this.__createFooter();
			this.__baseComponent.appendChild(this.__divFooterContainer);
		}
		var todayDate = new Date();
		var date = this.__maxDate < todayDate ? this.__maxDate : todayDate;
		this.__updateDaysInControl(date);
	};	
	
	NSCalendar.prototype.__createHeader = function()
	{
		if(!this.__divHeaderContainer)
		{
			var self = this;
			var initButton = function(strID,cssClass,buttonSettingKey,customClassKey,handler)
			{
				var btn = self.util.createElement("button",self.getID() + "btn" + strID,cssClass);
				btn.innerHTML = self.__buttonSetting[buttonSettingKey].html;
				self.util.addStyleClass(btn,self.__buttonSetting[buttonSettingKey].cssClass);
				self.__applyCustomClass(btn,customClassKey);
				self.util.addEvent(btn,"click",handler);
				self.__divHeaderContainer.appendChild(btn);
			};
			var createSelect = function(parent,id,cssClass,customClassKey,arrText,arrValue)
			{
				var select = self.util.createElement("select",self.getID() + "select" + id,cssClass);
				self.__applyCustomClass(select,customClassKey);
				self.util.addEvent(select,"change",self.__dropDownChangeHandler.bind(self));
				self.util.addEvent(select,"click",self.__dropDownClickHandler.bind(self));
				for (var count = 0; count < arrValue.length; count++) 
				{
				    var option = document.createElement("option");
				    option.text = arrText[count];
				    option.value = arrValue[count];
				    select.appendChild(option);
				}
				parent.appendChild(select);
				return select;
			};
			this.__divHeaderContainer = this.util.createDiv(this.getID() + "header","nsCalendarHeader");
			this.__applyCustomClass(this.__divHeaderContainer,"headerContainer");
			initButton("previous","nsCalendarButton","prev","prevButton",this.__prevClickHandler.bind(this));
			var divNavigation = this.util.createDiv(this.getID() + "headerNavigation","nsCalendarHeaderNav");
			if(this.__monthValueName.length !== this.__monthTextName.length)
			{
				this.__monthValueName = this.__monthTextName;
			}
			this.__cmbMonth = createSelect(divNavigation,"month","nsCalendarSelect","monthDropdown",this.__monthTextName,this.__monthValueName);
			var minYear = this.__minDate.getFullYear();
			var maxYear = this.__maxDate.getFullYear();
			this.__arrYear = [];
			for(var count = minYear;count <= maxYear;count++)
			{
				this.__arrYear.push(count);
			}
			this.__cmbYear = createSelect(divNavigation,"year","nsCalendarSelect","yearDropdown",this.__arrYear,this.__arrYear);
			this.__divHeaderContainer.appendChild(divNavigation);
			initButton("next","nsCalendarButton","next","nextButton",this.__nextClickHandler.bind(this));
		}
	};
	
	NSCalendar.prototype.__createWeek = function()
	{
		if(!this.__divWeekContainer)
		{
			this.__divWeekContainer = this.util.createDiv(this.getID() + "week","nsCalendarWeekContainer");
			this.__applyCustomClass(this.__divWeekContainer,"weekContainer");
			for(var count = 0;count < this.__weekName.length;count++)
			{
				var divWeek = this.util.createDiv(null,"nsCalendarWeek");
				this.__applyCustomClass(divWeek,"week");
				divWeek.appendChild(document.createTextNode(this.__weekName[count]));
				this.__divWeekContainer.appendChild(divWeek);
			}
		}
	};
	
	NSCalendar.prototype.__createDays = function()
	{
		if(!this.__divDayContainer)
		{
			this.__divDayContainer = this.util.createDiv(this.getID() + "day","nsCalendarDayContainer");
			this.__applyCustomClass(this.__divDayContainer,"dayContainer");
			this.__divDayBody = this.util.createDiv(this.getID() + "dayBody","nsCalendarDayContainerBody");
			var handler = this.__dayClickHandler.bind(this);
			for (var rowCount = 0;rowCount < 6;rowCount++) 
			{ 
			    var row = this.__createDayRow(this.__divDayBody);
			    for (var count = 0;count < 7;count++) 
			    { 
			    	var cell = this.__createDayCell(row,handler);
			    	var item = {row:row,cell:cell};
			    	this.__arrDayCells.push(item);
			    }			    
			}
			this.__divDayContainer.appendChild(this.__divDayBody);
		}
	};
	
	NSCalendar.prototype.__createDayRow = function(parent)
	{
		var divDayRow = this.util.createDiv(null,"nsCalendarDayContainerRow");
		parent.appendChild(divDayRow);
		return divDayRow;
	};
	
	NSCalendar.prototype.__createDayCell = function(parent,handler)
	{
		var divDay = this.util.createDiv(null,"nsCalendarDayContainerCell");
		this.util.addEvent(divDay,"click",handler);
		parent.appendChild(divDay);
		return divDay;
	};

	NSCalendar.prototype.__createTimePart = function() {
		if (this.__showTime) {
			this.__divTimeContainer = this.util.createDiv(this.getID() + "Time","nsCalendarTimeContainer");
			this.__applyCustomClass(this.__divTimeContainer,"timeContainer");

			var timePartContainer = this.util.createDiv(this.getID() + "TimePartCon","nsCalendarTimePartContainer");

			var timeLabelSpan = this.util.createElement("span", null, "nsCalendarTimeLabel");
			timeLabelSpan.appendChild(document.createTextNode("Time: "));
			timePartContainer.appendChild(timeLabelSpan);

			var timeSetting = this.__timeSetting;

            var hourInput = this.__createTimeInput("hour", "nsCalendarHourInput", timeSetting.minHour, timeSetting.maxHour);
            timePartContainer.appendChild(hourInput);

			timePartContainer.appendChild(this.__createTimeSeparator());

            var minuteInput = this.__createTimeInput("minute", "nsCalendarMinuteInput", timeSetting.minMinute, timeSetting.maxMinute);
            timePartContainer.appendChild(minuteInput);

			if(timeSetting.showSeconds) {
				timePartContainer.appendChild(this.__createTimeSeparator());

				var secondInput = this.__createTimeInput("second", "nsCalendarSecondInput", timeSetting.minSecond, timeSetting.maxSecond);
				timePartContainer.appendChild(secondInput);
			}			

			this.__divTimeContainer.appendChild(timePartContainer);

			var timeSaveContainer = this.util.createDiv(this.getID() + "TimePartSave","nsCalendarTimeSaveContainer");
			timeSaveContainer.appendChild(this.__createTimeButton("Save", null, "savetime", "savetimebutton", this.__savetimeClickHandler.bind(this)));
			timeSaveContainer.appendChild(this.__createTimeButton("Cancel", null, "canceltime", "canceltimebutton", this.__canceltimeClickHandler.bind(this)));

			this.__divTimeContainer.appendChild(timeSaveContainer);
        }
	}

	NSCalendar.prototype.__savetimeClickHandler = function(event) {
		this.__selectedDate = this.__setTimePartInDate(this.__selectedDate);
		this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTED,this.__selectedDate,{date:this.__selectedDate});
	};

	NSCalendar.prototype.__canceltimeClickHandler = function(event) {
		this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTION_CANCELLED);
	};

	NSCalendar.prototype.__createTimeInput = function(timePart,cssClass, minVal, maxVal) {
		var timeInput = this.util.createElement("input",this.getID() + "_input_" + timePart, "nsCalendarTimeInput " + cssClass);
		timeInput.type = "number";
		timeInput.min = minVal;
		timeInput.max = maxVal;
		timeInput.value = "0";
		timeInput.size = 2;     // Keep it small
		timeInput.addEventListener("change", this.__timeInputChangeHandler.bind(this));
		timeInput.addEventListener("input", this.__timeInputEnterInputHandler.bind(this));
		return timeInput;
	}

	NSCalendar.prototype.__createTimeButton = function(strID, cssClass, buttonSettingKey, customClassKey, handler) {
		var btn = this.util.createElement("button",this.getID() + "btn" + strID,"nsCalendarIconButton" + (cssClass ? " " + cssClass : ""));
		btn.innerHTML = this.__buttonSetting[buttonSettingKey].html;
		if(this.__timeSetting && this.__timeSetting.showSeconds) {
			var child = btn.children[0];
			if(child) {
				this.util.addStyleClass(child,"nsCalendarIconTimeSmall");
			}
		}
		this.util.addStyleClass(btn,this.__buttonSetting[buttonSettingKey].cssClass);
		this.__applyCustomClass(btn,customClassKey);
		this.util.addEvent(btn,"click",handler);
		return btn;
	}

	NSCalendar.prototype.__createTimeSeparator = function() {
		var timeSeparatorSpan = this.util.createElement("span", null, "nsCalendarTimeSeparator");
		timeSeparatorSpan.appendChild(document.createTextNode(" : "));
		return timeSeparatorSpan;
	}

	NSCalendar.prototype.__timeInputEnterInputHandler = function(event) {
		var input = event.target;
		var min = parseInt(input.min, 10);
		var max = parseInt(input.max, 10);
		var value = parseInt(input.value, 10);
		if (isNaN(value)) {
			value = 0;
		}
		if (value > max) {
			value = max;
		} else if (value < min) {
			value = min;
		}
		input.value = this.__padTimeValue(value);
	}

	NSCalendar.prototype.__timeInputChangeHandler = function(event) {
		if (!this.__selectedDate) {
			this.__selectedDate = new Date();
		}
		//this.__timeInputEnterInputHandler(event);
		this.__selectedDate = this.__setTimePartInDate(this.__selectedDate);
		// Optionally fire an event or update the UI
		// This is up to you.  E.g., if you want dateSelected to fire whenever time changes:
		// this.util.dispatchEvent(this.__baseComponent, NSCalendar.DATE_SELECTED, this.__selectedDate, { date: this.__selectedDate });
	};

	NSCalendar.prototype.__updateTimeInControl = function(date) {
		if (!this.__divTimeContainer) return;
		var hourInput   = this.__divTimeContainer.querySelector(".nsCalendarHourInput");
		var minuteInput = this.__divTimeContainer.querySelector(".nsCalendarMinuteInput");
		var secondInput = this.__divTimeContainer.querySelector(".nsCalendarSecondInput");

		if(hourInput) {
			hourInput.value = this.__padTimeValue(date.getHours());
		}
		if(minuteInput) {
			minuteInput.value = this.__padTimeValue(date.getMinutes());
		}
		if(secondInput) {
			secondInput.value = this.__padTimeValue(date.getSeconds());
		}
	};

	NSCalendar.prototype.__resetTimeInControl  = function() {
		var date = new Date();
		date.setHours(0, 0, 0, 0);
		this.__updateTimeInControl(date);
	}

	NSCalendar.prototype.__padTimeValue = function(value) {
		var retVal = String(value).padStart(2, '0');
		return retVal;
	}

	NSCalendar.prototype.__setTimePartInDate  = function(date) {
		var timeContainer = this.__divTimeContainer;
		if (!timeContainer || !date) {
			return date;
		}

		var hourInput   = timeContainer.querySelector(".nsCalendarHourInput");
		var minuteInput = timeContainer.querySelector(".nsCalendarMinuteInput");
		var secondInput = timeContainer.querySelector(".nsCalendarSecondInput");
	
		var newHour   = parseInt(hourInput.value, 10)   || 0;
		var newMinute = minuteInput ? (parseInt(minuteInput.value, 10) || 0) : 0;
		var newSecond = secondInput ? (parseInt(secondInput.value, 10) || 0) : 0;
		newHour   = Math.max(0, Math.min(this.__timeSetting.maxHour, newHour));
		newMinute = Math.max(0, Math.min(this.__timeSetting.maxMinute, newMinute));
		newSecond = Math.max(0, Math.min(this.__timeSetting.maxSecond, newSecond));
	
		date.setHours(newHour, newMinute, newSecond, 0);
		return date;
	}
	
	NSCalendar.prototype.__createFooter = function()
	{
		if(!this.__divFooterContainer)
		{
			this.__divFooterContainer = this.util.createDiv(this.getID() + "footer","nsCalendarFooterContainer");
			this.__applyCustomClass(this.__divFooterContainer,"footerContainer");
			if(this.__footerContent)
			{
				if(this.util.isString(this.__footerContent))
				{
					var compSpan = document.createElement("span");
					compSpan.innerHTML = this.__footerContent;
					this.__divFooterContainer.appendChild(compSpan);
				}
				else
				{
					this.__divFooterContainer.appendChild(this.__footerContent);
				}
			}
			
		}
	};
	
	NSCalendar.prototype.__updateDaysInControl = function(monthDate)
	{
		if(this.__isDateValidForNavigation(monthDate))
		{
			this.__setYearDropdown(monthDate.getFullYear());
			this.__cmbMonth.selectedIndex = monthDate.getMonth();
			var today = new Date();
			var date = new Date(monthDate.getFullYear(),monthDate.getMonth(),1,0,0,0,0); // Starting at the 1st of the month
			var extras = (date.getDay() + 6) % 7; // How many days of the last month do we need to include?
			date.setDate(date.getDate() - extras);
			var item = null;
			for(var count = 0;count < this.__arrDayCells.length;count++)
			{
				item = this.__arrDayCells[count];
				this.__updateDayCell(item.cell,date,monthDate,today,count);
				item.date = new Date(date.getTime());
				item.index = count;
			    date.setDate(date.getDate() + 1); 
			}
			if (this.__showTime) 
			{
				this.__updateTimeInControl(monthDate);
			}
		}
	};
	
	NSCalendar.prototype.__resetDayCell = function(cell)
	{
		if(cell)
		{
			cell.setAttribute("class","");
			this.util.addStyleClass(cell,"nsCalendarDayContainerCell");
			this.__applyCustomClass(cell,"day");
			cell.innerHTML = "";
		}
	};
	
	NSCalendar.prototype.__updateDayCell = function(cell,dateToSet,currentMonthDate,todayDate,index)
	{
		if(cell)
		{
			this.__resetDayCell(cell);
			cell.appendChild(document.createTextNode(dateToSet.getDate()));
			cell.setAttribute("data-ns-cal-index",index);
			if(this.__isDateSelectable(dateToSet))
			{
				if (dateToSet.getMonth() != currentMonthDate.getMonth()) 
			    {
			    	this.util.addStyleClass(cell,"nsCalendarOtherMonth");
			    }
				if (this.__dateCompare(dateToSet,todayDate) === 0) 
			    {
			    	this.util.addStyleClass(cell,"nsCalendarToday");
			    }
				if (this.__dateCompare(dateToSet,this.__selectedDate) === 0) 
			    {
					//dont fire event as it is just to update the cell
					this.__setCellSelection(dateToSet,cell,false);
			    }
			}
			else
			{
				this.util.addStyleClass(cell,"nsCalendarDayDisabled");
			}
		}
	};
	
	NSCalendar.prototype.__prevClickHandler = function(event)
	{
		event = this.util.getEvent(event);
		event.stopPropagation();
		var month = this.__cmbMonth.selectedIndex; 
		var year = this.__cmbYear.options[this.__cmbYear.selectedIndex].value;
		var date = this.__getDateObject(year,month,1);
		date.setMonth(date.getMonth() - 1);
		this.__updateDaysInControl(date);
	};
	
	NSCalendar.prototype.__nextClickHandler = function(event)
	{
		event = this.util.getEvent(event);
		event.stopPropagation();
		var month = this.__cmbMonth.selectedIndex; 
		var year = this.__cmbYear.options[this.__cmbYear.selectedIndex].value;
		var date = this.__getDateObject(year,month,1);
		date.setMonth(date.getMonth() + 1);
		this.__updateDaysInControl(date);
	};
	
	NSCalendar.prototype.__dayClickHandler = function(event)
	{
		var target = this.util.getTarget(event);
		if(!this.util.hasStyleClass(target,"nsCalendarDayContainerCell"))
		{
			target = this.util.findParentBySelector(target,".nsCalendarDayContainerCell");
		}
		if(target)
		{
			if(this.__lastSelectedCell)
			{
				this.util.removeStyleClass(this.__lastSelectedCell,"nsCalendarSelected");
			}
			var index = parseInt(target.getAttribute("data-ns-cal-index"));
			if(this.util.hasStyleClass(target,"nsCalendarOtherMonth"))
			{
				this.__lastSelectedCell = null;
				var item = this.__getItemByIndex(index);
				if(item && this.__isDateSelectable(item.date))
				{
					this.__selectedDate = item.date;
					this.__setTimePartInDate(this.__selectedDate);
					this.__updateDaysInControl(this.__selectedDate);
					this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTED,this.__selectedDate,{date:this.__selectedDate});
				}
			}
			else
			{
				this.__selectCellForIndex(index);
			}
		}
		event.stopPropagation();
	};
	
	NSCalendar.prototype.__dropDownChangeHandler = function(event)
	{
		event = this.util.getEvent(event);
		var month = this.__cmbMonth.selectedIndex; 
		var year = this.__cmbYear.options[this.__cmbYear.selectedIndex].value;
		var date = this.__getDateObject(year,month,1);
		this.__updateDaysInControl(date);
		event.stopPropagation();
	};
	
	NSCalendar.prototype.__dropDownClickHandler = function(event)
	{
		event = this.util.getEvent(event);
		event.stopPropagation();
	};
	
	NSCalendar.prototype.__selectCellForIndex = function(index)
	{
		this.__selectedDate = null;
		var item = this.__getItemByIndex(index);
		if(item)
		{
			item.date = this.__setTimePartInDate(item.date);
			this.__setCellSelection(item.date,item.cell,true);
		}
	};
	
	NSCalendar.prototype.__setCellSelection = function(date,cell,fireEvent)
	{
		if(this.__isDateSelectable(date))
		{
			this.__selectedDate = this.__cloneDateObject(date);
			if(fireEvent && !this.__showTime)
			{
				this.util.dispatchEvent(this.__baseComponent,NSCalendar.DATE_SELECTED,this.__selectedDate,{date:this.__selectedDate});
			}
			if(cell)
			{
				this.util.addStyleClass(cell,"nsCalendarSelected");
				this.__lastSelectedCell = cell;
			}
		}
	};
	
	NSCalendar.prototype.__clearCellSelectionExceptSelected = function() 
	{
		if(this.__arrDayCells && this.__arrDayCells.length > 0)
		{
			for(var count = 0;count < this.__arrDayCells.length;count++)
			{
				var item = this.__arrDayCells[count];
				if(this.__lastSelectedCell != item.cell)
				{
					this.util.removeStyleClass(item.cell,"nsCalendarSelected");
				}
			}
		}
	};
	
	NSCalendar.prototype.__getItemByIndex = function(index)
	{
		if(index > -1)
		{
			var item = {};
			for(var count = 0;count < this.__arrDayCells.length;count++)
			{
				item = this.__arrDayCells[count];
				if(item.index === index)
				{
					return item;
				}
			}
		}
		return null;
	};
	
	NSCalendar.prototype.__dateCompare = function(date1,date2)
	{
		if(!date1 && !date2)
		{
			return 0;
		}
		if(!date1)
		{
			return -1;
		}
		if(!date2)
		{
			return 1;
		}
		if (date1.getDate() == date2.getDate() && date1.getMonth() == date2.getMonth() && date1.getFullYear() == date2.getFullYear())
		{
			return 0;
		}
		var tempDate1 = this.__dateWithoutTime(this.__cloneDateObject(date1));
		var tempDate2 = this.__dateWithoutTime(this.__cloneDateObject(date2));
		return (tempDate1.getTime() > tempDate2.getTime());
	};
	
	NSCalendar.prototype.__cloneDateObject = function(date)
	{
		return this.__getDateObject(date.getFullYear(),date.getMonth(),date.getDate());
	};
	
	NSCalendar.prototype.__getDateObject = function(year,month,day)
	{
		var date = new Date(year,month,day);
		return date;
	};
	
	NSCalendar.prototype.__isDateSelectable = function(date)
	{
		if(date)
		{
			var tempDate = this.__dateWithoutTime(date);
			var tempMinDate = this.__dateWithoutTime(this.__minDate);
			var tempMaxDate = this.__dateWithoutTime(this.__maxDate);
			var isMinCond = tempDate >= tempMinDate;
			var isMaxCond = tempDate <= tempMaxDate;
			if(isMinCond && isMaxCond)
			{
				if(this.__markDayDisabled)
				{
					return this.__markDayDisabled(date);
				}
				else
				{
					return true;
				}
			}
		}
		return false;
	};
	
	NSCalendar.prototype.__dateWithoutTime = function(date)
	{
		var tempDate = new Date(date);
		tempDate.setHours(0, 0, 0, 0);
	    return tempDate;
	};
	
	NSCalendar.prototype.__isDateValidForNavigation = function(date)
	{
		if(date && date.getFullYear() >= this.__minDate.getFullYear() && date.getFullYear() <= this.__maxDate.getFullYear())
		{
			return true;
		}
		return false;
	};
	
	NSCalendar.prototype.__applyCustomClass = function(element,type)
	{
		if(element && type && this.__customClass[type])
		{
			this.util.addStyleClass(element,this.__customClass[type]);
		}
	};
	
	NSCalendar.prototype.__formatInputDate = function(inputValue,format)
	{
		format = format ? format : this.__inputDateFormat;
		if(inputValue)
		{
			if(Object.prototype.toString.call(inputValue) === '[object Date]')
			{
				return inputValue;
			}
			else
			{
				var nsDateUtil = new NSDateUtil();
				return nsDateUtil.parseString(inputValue,format);
			}
		}
		return null;
	};
	
	//IE issue 
	NSCalendar.prototype.__setYearDropdown = function(year)
	{
		//this.__cmbYear.selectedIndex = this.__cmbYear.querySelector('option[value="'+ monthDate.getFullYear() +'"]').index;
		this.__cmbYear.querySelector('option[value="'+ year +'"]').selected = "selected";
	};
	
	NSCalendar.DATE_SELECTED = "dateSelected";
	NSCalendar.DATE_SELECTION_CANCELLED = "dateSelectionCancelled";
	
	return NSCalendar;
})();
nsModuleExport(this,"NSCalendar",NSCalendar);