diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75915ee6..e3c6288f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@
- Add configurable number of shown months
- #51 Add unit tests with ci: [testling](https://ci.testling.com/rikkert/pikaday)
- Fix #94 blur input field after date selection
+- Add configuable container to render calendar into
+- Add option to show week numbers, see #147
## 1.2.0 - 2014-01-28
diff --git a/README.md b/README.md
index e21335b8..a61e6c90 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,17 @@
Pikaday - With Time Picker
========
-### Forked from [dbushell/Pikaday][david Pika] which only supports selecting dates
+### Time support added to [dbushell/Pikaday][david Pika]
This fork allows the user to specify the time along with their date. Done so by adding a couple select inputs to manipulate the date Pikaday is generating.
-
-#### Additional Method:
-
-`picker.setTime(hours, minutes, seconds)`
-
* Used to set time aspects of date.
* Will not change the currently selected date.
* If no date is selected, will select today. Any of the arguments may be null, and will not affect the date.
+
## Authors
* Owen Mead-Robins [http://www.owenmead.com/][owenmead]
[david Pika]: https://github.com/dbushell/Pikaday "Pikaday"
-[owenmead]: http://owenmead.com/ "owenmead.com"
+[owenmead]: http://owenmead.com/ "owenmead.com"
\ No newline at end of file
diff --git a/css/pikaday.css b/css/pikaday.css
index 579e8c1f..51a0221a 100644
--- a/css/pikaday.css
+++ b/css/pikaday.css
@@ -101,16 +101,16 @@ http://nicolasgallagher.com/micro-clearfix-hack/
}
.pika-prev,
-.is-rtl .pika-next {
+.is-rtl .pika-next:after {
float: left;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+ content: "\25b6";
*left: 0;
}
.pika-next,
-.is-rtl .pika-prev {
+.is-rtl .pika-prev:after {
float: right;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+ content: "\25C0";
*right: 0;
}
@@ -161,6 +161,11 @@ http://nicolasgallagher.com/micro-clearfix-hack/
background: #f5f5f5;
}
+.pika-week {
+ font-size: 11px;
+ color: #999;
+}
+
.is-today .pika-button {
color: #33aaff;
font-weight: bold;
diff --git a/css/site.css b/css/site.css
index 3f7b42b2..a5111a28 100644
--- a/css/site.css
+++ b/css/site.css
@@ -24,3 +24,19 @@ input[type="text"] {
button#datepicker-button {
margin-bottom: 3em;
}
+
+.flow-element {
+ display: inline-block;
+ margin-right: 3em;
+ vertical-align: top;
+}
+.flow-element:last-child {
+ margin-right: 0;
+}
+.flow-element input {
+ margin-top: 0;
+}
+
+#container {
+ min-height: 15em;
+}
\ No newline at end of file
diff --git a/examples/bound-container.html b/examples/bound-container.html
new file mode 100644
index 00000000..746f1567
--- /dev/null
+++ b/examples/bound-container.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Pikaday - Container example
+
+
+
+
+
+
+
+
Pikaday - Container example
+
+
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
+
+
+
+
+
+
+
+
+
+
+
+
What is this?
+
+
Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the GitHub issue tracker, thanks!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/container.html b/examples/container.html
new file mode 100644
index 00000000..c35d5005
--- /dev/null
+++ b/examples/container.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Pikaday - Container example
+
+
+
+
+
+
+
+
Pikaday - Container example
+
+
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
+
+
+
+
+
+
+
+
+
+
+
+
What is this?
+
+
Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the GitHub issue tracker, thanks!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/weeknumbers.html b/examples/weeknumbers.html
new file mode 100644
index 00000000..1adc22bd
--- /dev/null
+++ b/examples/weeknumbers.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Pikaday - weeknumbers example
+
+
+
+
+
+
+
+
Pikaday - showing weeknumbers
+
+
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
+
+
+
+
+
What is this?
+
+
Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the GitHub issue tracker, thanks!
+
+
+
+
+
diff --git a/pikaday.js b/pikaday.js
index 544f78ad..eb463950 100644
--- a/pikaday.js
+++ b/pikaday.js
@@ -206,6 +206,9 @@
// number of years either side, or array of upper/lower range
yearRange: 10,
+ // show week numbers at head of row
+ showWeekNumber: false,
+
// used internally (don't config outside)
minYear: 0,
maxYear: 9999,
@@ -232,6 +235,9 @@
// only used for the first display or when a selected date is not visible
mainCalendar: 'left',
+ // Specify a DOM element to render the calendar in
+ container: undefined,
+
// internationalization
i18n: {
previousMonth : 'Previous Month',
@@ -284,6 +290,13 @@
'';
},
+ renderWeek = function (d, m, y) {
+ // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
+ var onejan = new Date(y, 0, 1),
+ weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
+ return '
