Merge pull request #5 from celso-wo/master

Fixed issue #2
mikemajesty · Jan 22, 2017 · 85e8473 · 85e8473
2 parents b5e2e38 + aa53e9e
commit 85e8473
Show file tree

Hide file tree

Showing 2 changed files with 218 additions and 362 deletions.
diff --git a/chocobo-range-picker.html b/chocobo-range-picker.html
@@ -1,44 +1,61 @@
 <div class='container'>
   <label ng-if='options.txtDateInit'>{{options.txtDateInit}}</label>
   <span class='icon'>
-            <input type='text' ng-click='options.inputConfig.showIcon === false ? openModal() : undefined' ng-model='dateInput' ng-readonly='true' class='input-text' name='dateMap'>
-            <img  ng-if='options.inputConfig.showIcon || !options.inputConfig' ng-src='{{options.inputConfig.iconPath ? options.inputConfig.iconPath : iconUrl}}' ng-click='openModal()'/>
+            <input type='text' ng-click='options.inputConfig.showIcon === false ? openModal() : undefined'
+                   value="{{localeDate(leftCalendar.selectedDate)}} - {{localeDate(rightCalendar.selectedDate)}}"
+                   ng-readonly='true' class='input-text' name='dateMap'>
+            <img  ng-if='options.inputConfig.showIcon || !options.inputConfig'
+                  ng-src='{{options.inputConfig.iconPath ? options.inputConfig.iconPath : iconUrl}}' ng-click='openModal()'/>
     </span>
   <div ng-show='!isOpen' class='line'>
-    <div class='calendar column'>
+    <div class='calendar column padding-l'>
       <header>
-        <h2>{{ dateInitialMap.month }} - {{ dateInitialMap.year }}</h2>
-        <a class='btn-prev fontawesome-angle-left' ng-click='lastInitialMonth(true)'>&#x2770</a>
-        <a class='btn-next fontawesome-angle-right' ng-click='nextInitialMonth(true)'>&#x2771</a>
+        <h2>{{ localeMonth(leftCalendar.baseDate) }} - {{ localeYear(leftCalendar.baseDate) }}</h2>
+        <a class='btn-prev fontawesome-angle-left' ng-click='previousMonth(leftCalendar)'>&#x2770;</a>
+        <a class='btn-next fontawesome-angle-right' ng-click='nextMonth(leftCalendar)'>&#x2771;</a>
       </header>
       <table>
         <thead>
           <tr>
-            <td ng-repeat='dayOfWeek in allWeeks'>{{ dayOfWeek | limitTo: 3}}</td>
+            <td ng-repeat='dayOfWeek in weekdays()'>{{dayOfWeek | limitTo: 3}}</td>
           </tr>
         </thead>
         <tbody>
-          <tr ng-repeat='week in dateInitialMap.result'>
-            <td ng-repeat='dayOfWeek in allWeeks' class='{{ week[dayOfWeek].class}} {{ week[dayOfWeek].select}}' ng-click='week[dayOfWeek].isReadyOnly ? $event.stopPropagation() : chooseInitalDay(week[dayOfWeek])'>{{:: week[dayOfWeek].date.getDate()}}</td>
+          <tr ng-repeat='week in leftCalendar.weeks'>
+            <td ng-repeat='dayOfWeek in week'
+                ng-class="{ 'cursor': dayOfWeek.calendarMonth && isBeforeOrEqual(dayOfWeek.date, rightCalendar.selectedDate),
+                            'next-month': !dayOfWeek.calendarMonth,
+                            'current-day-last': isEqualsDate(dayOfWeek.date, leftCalendar.selectedDate),
+                            'hover-range-normal': isBetweenDate(dayOfWeek.date, leftCalendar.selectedDate, rightCalendar.selectedDate) }"
+                ng-click="dayOfWeek.calendarMonth &&isBeforeOrEqual(dayOfWeek.date, rightCalendar.selectedDate) ? selectDate(leftCalendar, dayOfWeek.date) : true" >
+              {{dayOfWeek.date.getDate()}}
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
     <div class='calendar column padding-l'>
       <header>
-        <h2>{{ dateFinalMap.month }} - {{ dateFinalMap.year }}</h2>
-        <a class='btn-prev fontawesome-angle-left' ng-click='lastInitialMonth()'>&#x2770;</a>
-        <a class='btn-next fontawesome-angle-right' ng-click='nextInitialMonth()'>&#x2771;</a>
+        <h2>{{ localeMonth(rightCalendar.baseDate) }} - {{ localeYear(rightCalendar.baseDate) }}</h2>
+        <a class='btn-prev fontawesome-angle-left' ng-click='previousMonth(rightCalendar)'>&#x2770;</a>
+        <a class='btn-next fontawesome-angle-right' ng-click='nextMonth(rightCalendar)'>&#x2771;</a>
       </header>
       <table>
         <thead>
           <tr>
-            <td ng-repeat='dayOfWeek in allWeeks'>{{dayOfWeek | limitTo: 3}}</td>
+            <td ng-repeat='dayOfWeek in weekdays()'>{{dayOfWeek | limitTo: 3}}</td>
           </tr>
         </thead>
         <tbody>
-          <tr ng-repeat='week in dateFinalMap.result'>
-            <td ng-repeat='dayOfWeek in allWeeks' class='{{ week[dayOfWeek].class}} {{ week[dayOfWeek].select}}' ng-click='week[dayOfWeek].isReadyOnly ? $event.stopPropagation() : chooseFinalDay(week[dayOfWeek])'>{{:: week[dayOfWeek].date.getDate()}}</td>
+          <tr ng-repeat='week in rightCalendar.weeks'>
+            <td ng-repeat='dayOfWeek in week'
+                ng-class="{ 'cursor': dayOfWeek.calendarMonth && isAfterOrEqual(dayOfWeek.date, leftCalendar.selectedDate),
+                            'next-month': !dayOfWeek.calendarMonth,
+                            'current-day-last': isEqualsDate(dayOfWeek.date, rightCalendar.selectedDate),
+                            'hover-range-normal': isBetweenDate(dayOfWeek.date, leftCalendar.selectedDate, rightCalendar.selectedDate) }"
+                ng-click="dayOfWeek.calendarMonth && isAfterOrEqual(dayOfWeek.date, leftCalendar.selectedDate) ? selectDate(rightCalendar, dayOfWeek.date) : true">
+              {{dayOfWeek.date.getDate()}}
+            </td>
           </tr>
         </tbody>
       </table>