calendar

Sugarball · Jun 5, 2018 · 942cd11 · 942cd11
1 parent 66a292a
commit 942cd11
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -15,28 +15,6 @@ I created this repository and this package due to it takes a lot of time to cont
 5) Supports input from keyboard
 6) Supports keyboard handling
 
-## Changelog
-## 6.0.1
-Updated to material datepicker 6.0.1
-## 6.0.0
-Styles included! Read below
-## 1.1.7
-Update to angular material 6.0.0 (2018/05/04)
-
-Now package can be compiled for production. Internal styles - soon!
-
-### 2018/04/18
-Datepicker theme supports dark themes. How to use it read below
-### 1.1.0
-Introduce first day of the week depends on locale
-
-### 1.0.7
-Roll back to angular material 5.2 source code
-
-### 1.0
-
-API has been completely changed.
-
 ## It's awesome, but how to use it?
 
 As easy as pie.
@@ -70,9 +48,12 @@ export interface matRangeDatepickerRangeValue<D> {
 
 Licence: MIT
 
-A little note for myself
-```shell
-npm run packagr
-(cd dist ; npm pack)
-yarn add range-0.0.1.tgz 
-```
+# to dev
+npm start
+
+## to deploy 
+yarn build:lib
+cd dist
+npm version patch
+npm pack
+npm publish
diff --git a/mat-range-datepicker/src/datepicker/calendar.html b/mat-range-datepicker/src/datepicker/calendar.html
@@ -1,40 +1,93 @@
+<div class="from-date-sec">
+  <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
+  <div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
+    <sat-month-view
+        *ngSwitchCase="'month'"
+        [(activeDate)]="activeDate"
+        [selected]="selected"
+        [beginDate]="beginDate"
+        [endDate]="endDate"
+        [rangeMode]="rangeMode"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (selectedChange)="_dateSelected($event)"
+        (_userSelection)="_userSelected()">
+    </sat-month-view>
 
-<ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
+    <sat-year-view
+        *ngSwitchCase="'year'"
+        [activeDate]="activeDate"
+        [selected]="selected"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (monthSelected)="_monthSelectedInYearView($event)"
+        (selectedChange)="_goToDateInView($event, 'month')">
+    </sat-year-view>
 
-<div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
-  <sat-month-view
-      *ngSwitchCase="'month'"
-      [(activeDate)]="activeDate"
-      [selected]="selected"
-      [beginDate]="beginDate"
-      [endDate]="endDate"
-      [rangeMode]="rangeMode"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      (selectedChange)="_dateSelected($event)"
-      (_userSelection)="_userSelected()">
-  </sat-month-view>
+    <sat-multi-year-view
+        *ngSwitchCase="'multi-year'"
+        [activeDate]="activeDate"
+        [selected]="selected"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (yearSelected)="_yearSelectedInMultiYearView($event)"
+        (selectedChange)="_goToDateInView($event, 'year')">
+    </sat-multi-year-view>
+  </div>
+</div>
+<div class="end-date-sec">
+  <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
+  <div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
+    <sat-month-view
+        *ngSwitchCase="'month'"
+        [(activeDate)]="activeDate"
+        [selected]="selected"
+        [beginDate]="beginDate"
+        [endDate]="endDate"
+        [rangeMode]="rangeMode"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (selectedChange)="_dateSelected($event)"
+        (_userSelection)="_userSelected()">
+    </sat-month-view>
 
-  <sat-year-view
-      *ngSwitchCase="'year'"
-      [activeDate]="activeDate"
-      [selected]="selected"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      (monthSelected)="_monthSelectedInYearView($event)"
-      (selectedChange)="_goToDateInView($event, 'month')">
-  </sat-year-view>
+    <sat-year-view
+        *ngSwitchCase="'year'"
+        [activeDate]="activeDate"
+        [selected]="selected"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (monthSelected)="_monthSelectedInYearView($event)"
+        (selectedChange)="_goToDateInView($event, 'month')">
+    </sat-year-view>
 
-  <sat-multi-year-view
-      *ngSwitchCase="'multi-year'"
-      [activeDate]="activeDate"
-      [selected]="selected"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      (yearSelected)="_yearSelectedInMultiYearView($event)"
-      (selectedChange)="_goToDateInView($event, 'year')">
-  </sat-multi-year-view>
+    <sat-multi-year-view
+        *ngSwitchCase="'multi-year'"
+        [activeDate]="activeDate"
+        [selected]="selected"
+        [dateFilter]="dateFilter"
+        [maxDate]="maxDate"
+        [minDate]="minDate"
+        (yearSelected)="_yearSelectedInMultiYearView($event)"
+        (selectedChange)="_goToDateInView($event, 'year')">
+    </sat-multi-year-view>
+  </div>
+</div>
+<div class="quick-select-sec">
+  <span class="select-title">Quick Select</span>
+  <ul>
+    <li><button mat-button>Quater 1</button></li>
+    <li><button mat-button>Quater 2</button></li>
+    <li><button mat-button>Quater 3</button></li>
+    <li><button mat-button>Quater 4</button></li>
+  </ul>
 </div>
+<div class="calendar-button-sec">
+  <button mat-button color="primary">Cancel</button>
+  <button mat-raised-button color="primary">Apply</button>
+</div>
diff --git a/mat-range-datepicker/src/datepicker/datepicker-content.css b/mat-range-datepicker/src/datepicker/datepicker-content.css
diff --git a/mat-range-datepicker/src/datepicker/datepicker-content.scss b/mat-range-datepicker/src/datepicker/datepicker-content.scss
@@ -0,0 +1,80 @@
+.mat-datepicker-content{
+  box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  display:block
+}
+.mat-datepicker-content .mat-calendar{
+  width:593px;
+  height:493px;
+}
+.from-date-sec, .end-date-sec {
+  display: inline-block;
+  width: 50%;
+  height: 360px;
+  box-sizing: border-box;
+}
+.from-date-sec {
+  border-right: .5px solid #E9E9E9;
+}
+.end-date-sec {
+  border-left: 0px solid #E9E9E9;
+}
+.quick-select-sec {
+  border-top: 1px solid #E9E9E9;
+  border-bottom: 1px solid #E9E9E9;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: 200;
+  .select-title {
+    color: #9F9F9F;
+  }
+  ul {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0 0 0 0;
+    color: #696969;
+    li {
+      display: inline-block;
+      margin-left: 10px;
+      .mat-button {
+        font-size: 13px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+.calendar-button-sec {
+  padding: 0 20px;
+  text-align: right;
+  text-align: right;
+  line-height: 80px;
+  button {
+    margin-left: 10px;
+  }
+}
+.mat-datepicker-content-touch{
+  box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);
+  display:block;
+  max-height:80vh;
+  overflow:auto;
+  margin:-24px
+}
+.mat-datepicker-content-touch .mat-calendar{
+  min-width:250px;
+  min-height:312px;
+  max-width:750px;
+  max-height:788px
+}
+@media all and (orientation:landscape){
+  .mat-datepicker-content-touch .mat-calendar{
+      width:64vh;
+      height:80vh
+  }
+}
+@media all and (orientation:portrait){
+  .mat-datepicker-content-touch .mat-calendar{
+      width:80vw;
+      height:100vw
+  }
+}
diff --git a/mat-range-datepicker/src/datepicker/datepicker.ts b/mat-range-datepicker/src/datepicker/datepicker.ts
@@ -84,7 +84,7 @@ export const _matRangeDatepickerContentMixinBase = mixinColor(matRangeDatepicker
   moduleId: module.id,
   selector: 'mat-range-datepicker-content',
   templateUrl: 'datepicker-content.html',
-  styleUrls: ['datepicker-content.css'],
+  styleUrls: ['datepicker-content.scss'],
   host: {
     'class': 'mat-datepicker-content',
     '[@transformPanel]': '"enter"',

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -8,7 +8,7 @@
             (dateInput)="onDateInput($event)"
             (dateChange)="onDateChange($event)">
     <mat-range-datepicker
-            #resultPicker [rangeMode]="true">
+            #resultPicker [rangeMode]="true" opened="true">
     </mat-range-datepicker>
     <mat-range-datepicker-toggle matSuffix [for]="resultPicker"></mat-range-datepicker-toggle>
 </mat-form-field>

diff --git a/src/styles.scss b/src/styles.scss
@@ -3,6 +3,7 @@
 body { 
   font-family: Roboto, Arial, sans-serif;
   margin: 0;
+  padding: 30px;
 }
 
 .basic-container {