Added alternative string submission for dates
diff --git a/dev/demo/datepicker.html b/dev/demo/datepicker.html
index e99f021..d24fac2 100644
--- a/dev/demo/datepicker.html
+++ b/dev/demo/datepicker.html
@@ -7,6 +7,8 @@
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
</head>
<body>
- <div id="dp"></div>
+ <div class="vc">
+ <div id="dp"></div>
+ </div>
</body>
</html>
diff --git a/dev/js/spec/datepickerSpec.js b/dev/js/spec/datepickerSpec.js
index bcab225..865b721 100644
--- a/dev/js/spec/datepickerSpec.js
+++ b/dev/js/spec/datepickerSpec.js
@@ -46,7 +46,7 @@
expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
// Max value
- var e = dp.show(9998, 2);
+ e = dp.show(9998, 2);
expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9998');
expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
@@ -59,7 +59,7 @@
expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
// Min value
- var e = dp.show(2, 2);
+ e = dp.show(2, 2);
expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2');
expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
@@ -78,7 +78,69 @@
it('should have modifyable month', function () {
var dp = dpClass.create();
- var e = dp.show(2013, 6);
+ var e = dp.show(2012, 9);
+
+ expect(e.nodeName).toEqual('DIV');
+ expect(e.classList.contains('datepicker')).toBeTruthy();
+
+ expect(e.getAttribute('tabindex')).toEqual('0');
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('September');
+
+ dp.incrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('October');
+
+ dp.incrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('November');
+
+ dp.incrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+ dp.incrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2013');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+ dp.decrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+ // Max value
+ e = dp.show(9999, 12);
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9999');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+ dp.incrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9999');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+ // Min value
+ e = dp.show(1, 2);
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('1');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
+
+ dp.decrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('1');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+ dp.decrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+ e = dp.show(0, 2);
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
+
+ dp.decrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+ dp.decrMonth();
+ expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+ expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
});
});
});
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 9882364..84243a9 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -46,13 +46,19 @@
select : function (year, month, day) {
if (arguments.length >= 1) {
this._selected = {'year' : year};
+ this._showYear = year;
if (arguments.length >= 2) {
this._selected['month'] = month;
- if (arguments.length >= 3)
+ this._showMonth = month;
+ if (arguments.length >= 3) {
this._selected['day'] = day;
+ this._showDay = day;
+ };
};
+
return this;
};
+
return this._selected;
},
@@ -63,13 +69,16 @@
*/
set : function (year, month, day) {
this.select(year, month, day);
+ this.store();
+ },
+
+ store : function () {
if (this._click !== undefined)
this._click(this._selected);
else
console.dir(this._selected);
},
-
/**
* Set the action for clicking as a callback.
* The callback will retrieve a an object with
@@ -81,7 +90,7 @@
this._click = cb;
},
-
+
/**
* Show the datepicker.
* Will either show the selected year/month
@@ -89,6 +98,10 @@
* Will return the element for appending to the dom.
*/
show : function (year, month) {
+
+ // Create text view
+ this.showText();
+
var e = this._element = d.createElement('div');
e.setAttribute('tabindex', 0);
e.style.outline = 0;
@@ -97,7 +110,7 @@
var today = new Date();
// Show year
- this._showYear = year ? year :
+ this._showYear = (year !== undefined) ? year :
(this._selected['year'] ? this._selected['year'] :
today.getYear() + 1900);
@@ -110,9 +123,65 @@
this._element.appendChild(this._monthHelper());
this._element.appendChild(this._yearHelper());
this._element.appendChild(this._dayHelper());
+ this._element.appendChild(this._closer());
+
return this._element;
},
+ showText : function () {
+
+ // Create element
+ this._elementText = document.createElement('div');
+ var et = this._elementText;
+ et.setAttribute('tabindex', 0);
+ et.style.outline = 0;
+ et.classList.add('value');
+
+ // Add input field
+ this._input = et.appendChild(
+ document.createElement('input')
+ );
+ this._input.value = this.toString();
+
+ // Add toggle button
+ var datepicker = et.appendChild(
+ document.createElement('div')
+ );
+
+ datepicker.onclick =
+ this.viewCalendar.bind(this);
+
+ datepicker.appendChild(
+ document.createTextNode('x')
+ );
+
+ // Check for enter
+ this._input.addEventListener(
+ 'keypress',
+ function (e) {
+ if (e.keyCode == 13) {
+ this.fromString(this._input.value);
+ this.store();
+ e.halt();
+ return false;
+ };
+ }.bind(this)
+ );
+
+ /*
+ var that = this;
+ et.addEventListener(
+ 'blur',
+ function (e) {
+ that.fromString(input.value);
+
+ // Better: Hide!
+ this.parentNode.removeChild(this);
+ e.halt();
+ }
+ );
+ */
+ },
/**
* Get the HTML element associated with the datepicker.
@@ -121,6 +190,34 @@
return this._element;
},
+ elementText : function () {
+ return this._elementText;
+ },
+
+ viewText : function () {
+
+ // Replace calendar view with text view
+ this._element.parentNode.replaceChild(
+ this._elementText,
+ this._element
+ );
+ },
+
+ viewCalendar : function () {
+ // Update calendar
+ this.fromString(this._input.value);
+
+ this._updateYear();
+ this._updateMonth();
+ this._updateDay();
+
+ // Replace calendar view with text view
+ this._elementText.parentNode.replaceChild(
+ this._element,
+ this._elementText
+ );
+ },
+
/**
* Get the current date in string format.
@@ -135,6 +232,23 @@
return str;
},
+ toString : function () {
+ // There are values selected
+ var v = '';
+ var s = this._selected;
+ if (s['year']) {
+ v += s['year'];
+ if (s['month']) {
+ v += '-';
+ v += s['month'] < 10 ? '0' + s['month'] : s['month'];
+ if (s['day']) {
+ v += '-';
+ v += s['day'] < 10 ? '0' + s['day'] : s['day'];
+ };
+ };
+ };
+ return v;
+ },
/**
* Increment the year.
@@ -302,6 +416,15 @@
return table;
},
+ // Create the day (calendar) helper element.
+ _closer : function () {
+ var closer = d.createElement('span');
+ closer.classList.add('closer');
+ closer.appendChild(d.createTextNode('x'));
+ closer.onclick = this.viewText.bind(this);
+ return closer;
+ },
+
_dayBody : function () {
var showDate = new Date(
this._showYear,
@@ -396,6 +519,19 @@
this._dBElement
);
this._dBElement = newBody;
+ },
+
+ fromString : function (v) {
+ if (v !== undefined) {
+
+ var d = v.split('-', 3);
+ d[0] = parseInt(d[0]);
+ if (d[1]) d[1] = parseInt(d[1]);
+ if (d[2]) d[2] = parseInt(d[2]);
+
+ // Select values
+ this.select(d[0], d[1], d[2]);
+ };
}
};
});
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 07943f0..72bdeee 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -424,32 +424,14 @@
// Show datepicker
if (this.type() === 'date') {
var dp = KorAP._vcDatePicker;
- if (v !== undefined) {
-
- var d = v.split('-', 3);
- d[0] = parseInt(d[0]);
- if (d[1]) d[1] = parseInt(d[1]);
- if (d[2]) d[2] = parseInt(d[2]);
-
- // Select values
- dp.select(d[0], d[1], d[2]);
- };
+ dp.fromString(v)
// Todo: change this
dp.onclick(function (selected) {
// There are values selected
if (selected['year']) {
- var v = '' + selected['year'];
- if (selected['month']) {
- v += '-';
- v += selected['month'] < 10 ? '0' + selected['month'] : selected['month'];
- if (selected['day']) {
- v += '-';
- v += selected['day'] < 10 ? '0' + selected['day'] : selected['day'];
- };
- };
- that.value(v);
+ that.value(this.toString());
that.update();
return;
};