add datepicker pointer

dist/css/datepicker.css

@@ -49,6 +49,38 @@
 .datepicker--content {
   padding: 2px; }
 
+.datepicker--pointer {
+  position: absolute;
+  background: #fff;
+  border-top: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  width: 10px;
+  height: 10px; }
+  .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
+    top: calc(100% - 4px);
+    transform: rotate(135deg); }
+  .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
+    right: calc(100% - 4px);
+    transform: rotate(225deg); }
+  .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
+    bottom: calc(100% - 4px);
+    transform: rotate(315deg); }
+  .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
+    left: calc(100% - 4px);
+    transform: rotate(45deg); }
+  .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
+    left: 8px; }
+  .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
+    right: 8px; }
+  .-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer {
+    left: calc(50% - 10px / 2); }
+  .-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
+    top: 8px; }
+  .-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
+    bottom: 8px; }
+  .-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
+    top: calc(50% - 10px / 2); }
+
 .datepicker--body {
   display: none; }
   .datepicker--body.active {

dist/js/datepicker.js

@@ -6,6 +6,7 @@ var Datepicker;
         containerBuilt = false,
         baseTemplate = '' +
             '<div class="datepicker">' +
+            '<i class="datepicker--pointer"></i>' +
             '<nav class="datepicker--nav"></nav>' +
             '<div class="datepicker--content"></div>' +
             '</div>',
@@ -19,7 +20,7 @@ var Datepicker;
             toggleSelected: true,
 
             position: 'bottom left',
-            offset: 8,
+            offset: 12,
 
             view: 'days',
             minView: 'days',
@@ -602,6 +603,7 @@ var Datepicker;
                 if (this.opts.onChangeView) {
                     this.opts.onChangeView(val)
                 }
+                this.setPosition(this.opts.position)
             }
 
             return val

index.html

@@ -11,12 +11,29 @@
         <div class="contents">
             <article>
                 <div class="calendar"></div>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
                 <input type="text" name="start" placeholder="Start"/>
                 <input type="text" name="end" placeholder="End"/>
                 <br/>
                 <br/>
 
                 <button>Update</button>
+
+
             </article>
         </div>
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
@@ -32,6 +49,7 @@
                 }
             })
             $end.datepicker({
+                position: 'right top',
                 onSelect: function (format, date) {
                     $start.data('datepicker')
                             .update('maxDate', date)

js/datepicker/datepicker.js

@@ -6,6 +6,7 @@ var Datepicker;
         containerBuilt = false,
         baseTemplate = '' +
             '<div class="datepicker">' +
+            '<i class="datepicker--pointer"></i>' +
             '<nav class="datepicker--nav"></nav>' +
             '<div class="datepicker--content"></div>' +
             '</div>',
@@ -19,7 +20,7 @@ var Datepicker;
             toggleSelected: true,
 
             position: 'bottom left',
-            offset: 8,
+            offset: 12,
 
             view: 'days',
             minView: 'days',
@@ -602,6 +603,7 @@ var Datepicker;
                 if (this.opts.onChangeView) {
                     this.opts.onChangeView(val)
                 }
+                this.setPosition(this.opts.position)
             }
 
             return val

sass/datepicker/_datepicker.scss

@@ -12,7 +12,7 @@
 
 .datepicker {
   background: #fff;
-  border: 1px solid $colorGrey;
+  border: 1px solid $borderColor;
   border-radius: $datepickerBorderRadius;
   box-sizing: content-box;
   width: $datepickerWidth;
@@ -56,6 +56,66 @@
   padding: $datepickerPadding;
 }
 
+//  Pointer
+// -------------------------------------------------
+$pointerHalfSize: $pointerSize / 2 - 1;
+
+.datepicker--pointer {
+  position: absolute;
+  background: #fff;
+  border-top: 1px solid $borderColor;
+  border-right: 1px solid $borderColor;
+  width: $pointerSize;
+  height: $pointerSize;
+
+  //  Main axis
+  // -------------------------
+
+  .-top-left- &, .-top-center- &, .-top-right- & {
+    top: calc(100% - #{$pointerHalfSize});
+    transform: rotate(135deg);
+  }
+
+  .-right-top- &, .-right-center- &, .-right-bottom- & {
+    right: calc(100% - #{$pointerHalfSize});
+    transform: rotate(225deg);
+  }
+
+  .-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
+    bottom: calc(100% - #{$pointerHalfSize});
+    transform: rotate(315deg);
+  }
+
+  .-left-top- &, .-left-center- &, .-left-bottom- & {
+    left: calc(100% - #{$pointerHalfSize});
+    transform: rotate(45deg);
+  }
+
+  //  Secondary axis
+  // -------------------------
+
+  .-top-left- &, .-bottom-left- & {
+    left: $pointerOffset;
+  }
+  .-top-right- &, .-bottom-right- & {
+    right: $pointerOffset;
+  }
+  .-top-center- &, .-bottom-center- & {
+    left: calc(50% - #{$pointerSize} / 2);
+  }
+
+  .-left-top- &, .-right-top- & {
+    top: $pointerOffset;
+  }
+  .-left-bottom- &, .-right-bottom- & {
+    bottom: $pointerOffset;
+  }
+  .-left-center- &, .-right-center- & {
+    top: calc(50% - #{$pointerSize} / 2);
+  }
+
+}
+
 //  Body
 // -------------------------------------------------
 

sass/datepicker/datepicker-config.scss

@@ -8,14 +8,17 @@ $textColor: #333;
 $navigationHeight: 32px;
 $navigationButtonsOffset: 1px;
 
+$pointerSize: 10px;
+$pointerOffset: 8px;
+
 // Colors
 $colorGrey: #ddd;
-
 $colorAnotherMonth: #ddd;
 $colorCellHover: #eee;
 $colorCellCurrent: #60C4F5;
 $colorCellSelected: skyblue;
 $colorCellWeekend: '';
+$borderColor: $colorGrey;
 $bgButton: #f2f2f2;
 $bgButtonHover: darken($bgButton, 3);