Fixed problems with the datepicker
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 1a1d9fe..01bb0d7 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -29,6 +29,11 @@
return this;
},
+ set : function (year, month, day) {
+ this.select(year, month, day);
+ console.dir(this._selected);
+ },
+
select : function (year, month, day) {
if (arguments.length >= 1) {
this._selected = {'year' : year};
@@ -47,8 +52,8 @@
picker.classList.add('datepicker');
this._showYear = year;
this._showMonth = month;
- picker.appendChild(this._yearHelper());
picker.appendChild(this._monthHelper());
+ picker.appendChild(this._yearHelper());
picker.appendChild(this._dayHelper());
return picker;
},
@@ -104,6 +109,10 @@
this._yElement = year.appendChild(d.createElement('span'));
this._yElement.appendChild(document.createTextNode(this._showYear));
+ this._yElement.onclick = function () {
+ this.set(this._showYear);
+ }.bind(this);
+
// Increment year
year.appendChild(d.createElement('span'))
.onclick = this.incrYear.bind(this);
@@ -127,6 +136,9 @@
this._mElement.appendChild(
document.createTextNode(loc.MONTH[this._showMonth-1])
);
+ this._mElement.onclick = function () {
+ this.set(this._showYear, this._showMonth);
+ }.bind(this);
// Increment month
month.appendChild(d.createElement('span'))
@@ -159,6 +171,14 @@
var showDate = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
var date = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
var today = new Date();
+ var that = this;
+ var click = function () {
+ that.set(
+ that._showYear,
+ that._showMonth,
+ parseInt(this.firstChild.data)
+ );
+ };
// Skip back to the previous monday (may be in the last month)
date.setDate(date.getDate() - ((date.getDay() + 6) % 7));
@@ -176,8 +196,12 @@
var td = tr.appendChild(d.createElement('td'));
// Not part of the current month
- if (date.getMonth() !== showDate.getMonth())
+ if (date.getMonth() !== showDate.getMonth()) {
td.classList.add('out');
+ }
+ else {
+ td.onclick = click;
+ };
// This is the current day
if (date.getDate() === today.getDate() &&
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index bf8f43a..b653ef1 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,12 +1,14 @@
@charset "utf-8";
@import "../util";
+$border-size: 2px;
+
div.datepicker {
display: inline-block;
padding: 4pt;
box-shadow: $choose-box-shadow;
border: {
- width: 2px;
+ width: $border-size;
style: solid;
radius: $standard-border-radius;
}
@@ -14,29 +16,47 @@
font-size: 120%;
width: 45%;
}
- > div.year {
+ > div.month {
float: right;
}
@include choose-item;
> div > span {
display: inline-block;
+ &:first-child,
+ &:last-child {
+ width: 15%;
+ &::before {
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ min-width: 14px;
+ }
+ }
&:first-child::before {
- cursor: pointer;
- font-family: 'FontAwesome';
content: $fa-previous;
- width: 10%;
}
- &:last-child::after {
- cursor: pointer;
- font-family: 'FontAwesome';
+ &:last-child::before {
content: $fa-next;
- width: 10%;
}
+ overflow: hidden;
+ white-space: nowrap;
&:nth-child(2) {
+ cursor: pointer;
display: inline-block;
- width: 80%;
+ width: 70%;
text-align: center;
+ text-overflow: ellipsis;
+ border: {
+ radius: $standard-border-radius;
+ style: solid;
+ width: $border-size;
+ color: transparent;
+ }
+ &:hover {
+ @include choose-hover;
+ }
}
}
table {