Merge pull request 6eDesign#1 from beyonk-adventures/master

allow start and end ranges

src/App.html

@@ -2,7 +2,7 @@ <h1>SvelteCalendar</h1>
 <div class="container">
 	<p>A lightweight date picker written with Svelte. Here is an example: </p>
 
-	<Datepicker format="{dateFormat}" />
+	<Datepicker format="{dateFormat}" start={new Date()} end={new Date()} />
 	<!-- <Datepicker ref:cal {start} {end} format="mm/dd/yyyy" /> -->
 
 	<p>This component can be used with or without the Svelte compiler.</p>
@@ -61,6 +61,12 @@ <h4>Without Svelte JS:</h4>
 			</button>
 		</Datepicker>
 	</div>
+
+	<p>You can confine the date selection range with start and end:</p>
+
+	<div class="text-center">
+		<Datepicker format="{dateFormat}" start={new Date()} end={inOneWeek} />
+	</div>
 </div>
 
 <style>
@@ -97,11 +103,16 @@ <h4>Without Svelte JS:</h4>
 	  data() {
 	    return {
 	      start: new Date(),
-	      dateFormat: "#{l}, #{F} #{j}, #{Y}"
+				dateFormat: "#{l}, #{F} #{j}, #{Y}"
 	    };
 	  },
 	  computed: {
-	    end: ({ start }) => new Date(start.getTime() + 1000 * 3600 * 24 * 720)
+			end: ({ start }) => new Date(start.getTime() + 1000 * 3600 * 24 * 720),
+			inOneWeek: ({ start }) => {
+				const date = new Date(start)
+				date.setDate(date.getDate() + 7)
+				return date
+			}
 	  },
 	  components: {
 	    Datepicker: "./Components/Datepicker.html"

src/Components/Datepicker.html

@@ -34,6 +34,8 @@
         <Month 
           {visibleMonth}
           {selected}
+          {start}
+          {end}
           on:dateSelected="registerSelection(event)"
         />
       </div>

src/Components/Month.html

@@ -1,6 +1,6 @@
 <div class="month-container">
   {#each visibleMonth.weeks as week}
-    <Week days={week.days} {selected} on:dateSelected />
+    <Week days={week.days} {selected} {start} {end} on:dateSelected />
   {/each}
 </div>
 

src/Components/Week.html

@@ -4,11 +4,12 @@
       class="day" 
       class:outside-month="!day.partOfMonth"
       class:is-today="day.isToday"
-      on:click="fire('dateSelected',day.date)"
     >
       <button 
         class="day--label" 
-        class:selected="datesAreSameDay(day.date,selected) === true"
+        class:selected="datesAreSameDay(day.date,selected)"
+        on:click="fire('dateSelected',day.date)"
+        disabled="{!isDaySelectable(day.date, start, end)}"
       >
         {day.date.getDate()}
       </button>
@@ -81,13 +82,16 @@
 </style>
 
 <script>
+  import { isDaySelectable } from './lib/helpers'
+
   export default { 
     helpers: { 
       datesAreSameDay(a,b) {
         return a.getDate() == b.getDate() 
           && a.getMonth() == b.getMonth()
           && a.getFullYear() == b.getFullYear()
-      }
+      },
+      isDaySelectable
     }
   }
 </script>

src/Components/lib/helpers.js

@@ -19,16 +19,20 @@ const getCalendarPage = (month,year,dayProps) => {
   return { month, year, weeks }
 }
 
+function isDaySelectable (day, start, end) {
+  return day >= start && day <= end;
+}
+
 const getDayPropsHandler = (start,end) => {
   let today = new Date(); 
   today.setHours(0,0,0,0);
   return date => ({
-    selectable: date >= start && date <= end,
+    selectable: isDaySelectable(today, start, end),
     isToday: date.getTime() == today.getTime()
   });
 };
 
-export function getMonths(start, end) { 
+function getMonths(start, end) { 
   start.setHours(0,0,0,0);
   end.setHours(0,0,0,0);
   let endDate = new Date(end.getFullYear(), end.getMonth() + 1, 1); 
@@ -40,4 +44,9 @@ export function getMonths(start, end) {
     date.setMonth(date.getMonth() + 1); 
   }
   return months;
-}
+}
+
+export {
+  getMonths,
+  isDaySelectable
+};