updates

src/widgets/two-datepicker/TwoDatepicker.js

@@ -29,7 +29,7 @@ export class TwoDatePicker {
 			anim        : true,
 			locales     : 'ro-RO',
 			cancelable  : true,
-			hiddenMode  : false
+			hiddenMode  : false,
 		}, ... opts };
 
 		this.events = events || {};
@@ -69,7 +69,7 @@ export class TwoDatePicker {
 		this.ui.append(firstCol);
 		this.ui.append(secondCol);
 
-		let dpOpts = {
+		const dpOpts = {
 			style       : this.opts.style,
 			disabled    : this.opts.disabled,
 			fullMonth   : this.opts.fullMonth,
@@ -81,12 +81,12 @@ export class TwoDatePicker {
 
 		new DatePicker(firstCol, dpOpts, {
 			init: datepicker => that.datepicker[0] = datepicker,
-			onSelect: (_, date) => Ut.trigger(that.events.onChange, that, date, 0)
+			onSelect: (_, val) => this.selectDate(0, val)
 		});
 
 		new DatePicker(secondCol, dpOpts, {
 			init: datepicker => that.datepicker[1] = datepicker,
-			onSelect: (_, date) => Ut.trigger(that.events.onChange, that, date, 1)
+			onSelect: (_, val) => this.selectDate(1, val)
 		});
 
 		if (this.isInput) {
@@ -111,9 +111,62 @@ export class TwoDatePicker {
 			this.target.append(this.ui);
 		}
 
-	   Ut.trigger(this.events.init, this);
+	   Ut.trigger(this.opts.onInit, this);
 	}
 
+	/**
+	* TwoDatePicker, Select Value
+	*/
+	selectDate(index, val) {
+
+		Ut.trigger(this.opts.onSelect, this, index, val);
+
+		const firstDp  = this.datepicker[0];
+		const secondDp = this.datepicker[1];
+	
+		if (index == 0) {
+
+			secondDp.clear();
+			secondDp.minDate = firstDp.selectedDate;
+	
+			if (firstDp.month != secondDp.month) {
+
+				secondDp.year = firstDp.year;
+				secondDp.month = firstDp.month;
+	
+				secondDp.makeUI();
+			}
+			else {
+				secondDp.setDateRange({ minDate: firstDp.selectedDate });
+			}
+		
+			return;
+		}
+
+		if (!firstDp.selectedDate) {
+			this.target.value = '';
+			return;
+		}
+
+		this.target.value = `${this.dateFormat(firstDp.selectedDate)} - ${this.dateFormat(secondDp.selectedDate)}`;
+		this.hide();
+
+		Ut.trigger(this.opts.onChange, this);
+		this.target.dxTrigger('changed');
+	}
+
+	/**
+    * TwoDatepicker, Date Format
+    */
+    dateFormat(date) {
+        return date.toLocaleDateString(this.opts.locales, {
+            day   : '2-digit',
+            month : '2-digit',
+            year  : 'numeric'
+        });
+        //.replace(/\./g, '/');
+    };
+
 	/**
 	* TwoDatePicker, Show UI
 	*/
@@ -129,7 +182,7 @@ export class TwoDatePicker {
 
 		this.isOpen = true;
 
-		Ut.trigger(this.events.onShow, this);
+		Ut.trigger(this.opts.onShow, this);
 	}
 
 	/**
@@ -147,7 +200,7 @@ export class TwoDatePicker {
 
 			this.isOpen = false;
 
-			Ut.trigger(this.events.onHide, this);
+			Ut.trigger(this.opts.onHide, this);
 		}
 	}
 
@@ -243,7 +296,7 @@ export class TwoDatePicker {
 
 				this.target.dxOn('clear', _ => {
 					that.clear();
-					Ut.trigger(that.events.onChange, that, null, false);
+					Ut.trigger(that.opts.onChange, that, null, false);
 				});
 			}
 			
@@ -255,7 +308,7 @@ export class TwoDatePicker {
 
 			// Resize window Handler
 
-			window.dxOn('resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey, _ => {
+			window.dxOn('scroll.two_datepicker resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey, _ => {
 
 				if (tm) {
 					clearTimeout(tm);
@@ -282,11 +335,13 @@ export class TwoDatePicker {
 			this.target.dxOff('click.two_datepicker keydown.two_datepicker paste.two_datepicker restore.two_datepicker');
 
 			document.body.dxOff('click.two_datepicker' + this.ekey);
-			window.dxOff('resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey);
+			window.dxOff('scroll.two_datepicker resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey);
 		}
 
 		this.target.dxRemoveData('two_datepicker');
 
 		Stack.delete(this);
+
+		Ut.trigger(this.opts.onDestroy, this);
 	}
 }