Fixes & updates

- fixed #40 ; also removed deprecated event handling
- fixed #41
- added range picker hover preview
- added swipe to see next/previous month (basic)
- added package.json referencing on rollup.config
- minor code optimizations

demo/index.html

@@ -52,7 +52,7 @@ <h1>duDatepicker</h1>
 		<h2>Date picker</h2>
 		<table id="mycalendar"></table>
 		<input type="text" id="datepicker1" data-maxdate="today" value="11/15/2021-11/18/2021">
-		<input type="text" id="datepicker2">
+		<input type="text" id="datepicker2" value="20-Oct-2022">
 		<h3>Range</h3>
 		<input type="text" id="daterange">
 		<input type="text" id="range-from">
@@ -133,8 +133,8 @@ <h3>Multi select</h3>
 				setI18n: new duDatepicker.i18n.Locale(months, null, days, null, null, 1)
 			})
 
-			duDatepicker('#datepicker2, #datepicker3', {
-				format: 'DD mmmm d, yyyy', //range: true,
+			duDatepicker('#datepicker2', {
+				format: 'dd-mmm-yyyy', //range: true,
 				// i18n: 'ru',
 				// firstDay: 2,
 				events: {
@@ -146,6 +146,19 @@ <h3>Multi select</h3>
 				root: '#dp-holder'
 			})
 
+			duDatepicker('#datepicker3', {
+				format: 'mmm d, yyyy', //range: true,
+				i18n: 'ru',
+				firstDay: 2,
+				events: {
+					dateChanged: function (data) {
+						console.log(data)
+						log('Date: ' + data.date)
+					}
+				},
+				root: '#dp-holder'
+			})
+
 			duDatepicker('#datepicker2', 'set', {
 				// setI18n: 'ru',
 				setPriorYears: 10,

dist/duDatepicker.css

@@ -1,5 +1,5 @@
 /*!Don't remove this!
- * duDatePicker styles
+ * duDatepicker styles
  * 
  * Author: Dionlee Uy
  * Email: [email protected]
@@ -273,6 +273,19 @@
   border-radius: 50%;
 }
 
+.dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-from-preview, .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-to-preview, .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.in-range-preview {
+  background-color: rgba(100, 100, 100, 0.07);
+  border-radius: 0;
+}
+
+.dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-from-preview {
+  border-radius: 50% 0 0 50%;
+}
+
+.dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-to-preview {
+  border-radius: 0 50% 50% 0;
+}
+
 .dcalendarpicker .dudp__cal-container .dudp__months-view {
   display: flex;
   flex-direction: column;
@@ -680,6 +693,10 @@
   color: #1976d2;
 }
 
+.dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from-preview, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to-preview, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.in-range-preview {
+  background-color: rgba(200, 200, 200, 0.07);
+}
+
 .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.in-range, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to {
   background-color: rgba(25, 118, 210, 0.2);
 }