jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

add datepicker pointer

Browse Source
This commit is contained in:
t1m0n 2015-11-18 11:30:15 +03:00
parent a23309d46c
commit d92f4ccad5
6 changed files with 121 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dist/css/datepicker.css vendored
View File

@ -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 {

4
dist/js/datepicker.js vendored
View File

@ -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

18
index.html
View File

@ -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)

4
js/datepicker/datepicker.js
View File

@ -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

62
sass/datepicker/_datepicker.scss
View File

@ -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
// -------------------------------------------------

5
sass/datepicker/datepicker-config.scss
View File

@ -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);