diff --git a/app/assets/javascripts/admin/templates/email_preview_digest.hbs b/app/assets/javascripts/admin/templates/email_preview_digest.hbs
index 630260f13..7bd2a4455 100644
--- a/app/assets/javascripts/admin/templates/email_preview_digest.hbs
+++ b/app/assets/javascripts/admin/templates/email_preview_digest.hbs
@@ -3,7 +3,7 @@
<div class='admin-controls'>
<div class='span7 controls'>
<label for='last-seen'>{{i18n 'admin.email.last_seen_user'}}</label>
- {{input type="date" value=lastSeen id="last-seen"}}
+ {{date-picker-past value=lastSeen id="last-seen"}}
<label>{{i18n 'admin.email.user'}}:</label>
{{user-selector single="true" usernames=username}}
<button class='btn' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>
diff --git a/app/assets/javascripts/admin/templates/reports.hbs b/app/assets/javascripts/admin/templates/reports.hbs
index 53174990b..7f0363a2f 100644
--- a/app/assets/javascripts/admin/templates/reports.hbs
+++ b/app/assets/javascripts/admin/templates/reports.hbs
@@ -1,8 +1,8 @@
<h3>{{model.title}}</h3>
<div class="admin-reports-filter">
- {{i18n 'admin.dashboard.reports.start_date'}} {{input type="date" value=startDate}}
- {{i18n 'admin.dashboard.reports.end_date'}} {{input type="date" value=endDate}}
+ {{i18n 'admin.dashboard.reports.start_date'}} {{date-picker-past value=startDate}}
+ {{i18n 'admin.dashboard.reports.end_date'}} {{date-picker-past value=endDate}}
{{combo-box valueAttribute="value" content=categoryOptions value=categoryId}}
{{#if showGroupOptions}}
{{combo-box valueAttribute="value" content=groupOptions value=groupId}}
diff --git a/app/assets/javascripts/discourse/components/date-picker-future.js.es6 b/app/assets/javascripts/discourse/components/date-picker-future.js.es6
new file mode 100644
index 000000000..fa6ed4037
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/date-picker-future.js.es6
@@ -0,0 +1,12 @@
+import DatePicker from "discourse/components/date-picker";
+
+export default DatePicker.extend({
+ layoutName: "components/date-picker",
+
+ _opts() {
+ return {
+ defaultDate: moment().add(1, "day").toDate(),
+ minDate: new Date(),
+ };
+ }
+});
diff --git a/app/assets/javascripts/discourse/components/date-picker-past.js.es6 b/app/assets/javascripts/discourse/components/date-picker-past.js.es6
new file mode 100644
index 000000000..5e9a3ab83
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/date-picker-past.js.es6
@@ -0,0 +1,12 @@
+import DatePicker from "discourse/components/date-picker";
+
+export default DatePicker.extend({
+ layoutName: "components/date-picker",
+
+ _opts() {
+ return {
+ defaultDate: new Date(),
+ maxDate: new Date(),
+ };
+ }
+});
diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6
index 53b7c0c42..21825d2ed 100644
--- a/app/assets/javascripts/discourse/components/date-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/date-picker.js.es6
@@ -15,8 +15,6 @@ export default Em.Component.extend({
field: input,
container: this.$()[0],
format: "YYYY-MM-DD",
- defaultDate: moment().add(1, "day").toDate(),
- minDate: new Date(),
firstDay: moment.localeData().firstDayOfWeek(),
i18n: {
previousMonth: I18n.t('dates.previous_month'),
diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
index 942fa2611..97f8a0e34 100644
--- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
@@ -39,7 +39,7 @@
<p class="with-validation">
{{{pinMessage}}}
{{fa-icon "clock-o"}}
- {{date-picker value=model.pinnedInCategoryUntil}}
+ {{date-picker-future value=model.pinnedInCategoryUntil}}
{{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
</p>
<p>
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 992370c48..49b4ad957 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1,5 +1,6 @@
@import "vendor/normalize";
@import "vendor/font_awesome/font-awesome";
+@import "vendor/pikaday";
@import "common/foundation/helpers";
@import "common/foundation/base";
@import "vendor/select2";
@@ -11,4 +12,3 @@
@import "common/printer-friendly";
@import "common/base/*";
@import "common/d-editor";
-@import "vendor/pikaday";
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index b13c4a3bd..414bffb78 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -38,12 +38,6 @@ $mobile-breakpoint: 700px;
.filters input { margin-bottom: 0; }
}
-.admin-contents .admin-reports-filter {
- input[type="date"] {
- width: 140px;
- }
-}
-
td.flaggers td {
border-bottom: none;
border-top: none;
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 667496f92..acabe8664 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -33,15 +33,6 @@
}
}
-.date-picker-wrapper {
- display: inline-block;
- position: relative;
-}
-
-.pika-single {
- position: absolute !important;
-}
-
.modal-body.feature-topic {
padding: 5px;
max-height: 500px;
@@ -53,11 +44,6 @@
.badge-wrapper {
margin-right: 0;
}
- .date-picker {
- text-align: center;
- width: 80px;
- margin: 0;
- }
.desc {
display: inline-block;
vertical-align: middle;
diff --git a/app/assets/stylesheets/common/components/date-picker.css.scss b/app/assets/stylesheets/common/components/date-picker.css.scss
new file mode 100644
index 000000000..edf976fa7
--- /dev/null
+++ b/app/assets/stylesheets/common/components/date-picker.css.scss
@@ -0,0 +1,22 @@
+.pika-table {
+ th, td {
+ padding: 0 !important;
+ border-top: none !important;
+ border-bottom: none !important;
+ }
+}
+
+.date-picker-wrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.date-picker {
+ text-align: center;
+ width: 80px;
+ margin: 0;
+}
+
+.pika-single {
+ position: absolute !important;
+}
diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss
index a12e8e546..90799a4ea 100644
--- a/app/assets/stylesheets/vendor/pikaday.scss
+++ b/app/assets/stylesheets/vendor/pikaday.scss
@@ -3,15 +3,43 @@
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
*/
+// Variables
+// Declare any of these variables before importing this SCSS file to easily override defaults
+// Variables are namespaced with the pd (pikaday) prefix
+
+// Colours
+$pd-text-color: #333 !default;
+$pd-title-color: #333 !default;
+$pd-title-bg: #fff !default;
+$pd-picker-bg: #fff !default;
+$pd-picker-border: #ccc !default;
+$pd-picker-border-bottom: #bbb !default;
+$pd-picker-shadow: rgba(0,0,0,.5) !default;
+$pd-th-color: #999 !default;
+$pd-day-color: #666 !default;
+$pd-day-bg: #f5f5f5 !default;
+$pd-day-hover-color: #fff !default;
+$pd-day-hover-bg: #ff8000 !default;
+$pd-day-today-color: #33aaff !default;
+$pd-day-selected-color: #fff !default;
+$pd-day-selected-bg: #33aaff !default;
+$pd-day-selected-shadow: #178fe5 !default;
+$pd-day-disabled-color: #999 !default;
+$pd-week-color: #999 !default;
+
+// Font
+$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+
.pika-single {
z-index: 9999;
display: block;
position: relative;
- color: #333;
- background: #fff;
- border: 1px solid #ccc;
- border-bottom-color: #bbb;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: $pd-text-color;
+ background: $pd-picker-bg;
+ border: 1px solid $pd-picker-border;
+ border-bottom-color: $pd-picker-border-bottom;
+ font-family: $pd-font-family;
&.is-hidden {
display: none;
@@ -19,7 +47,7 @@
&.is-bound {
position: absolute;
- box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
+ box-shadow: 0 5px 15px -5px $pd-picker-shadow;
}
}
@@ -70,7 +98,8 @@
font-size: 14px;
line-height: 20px;
font-weight: bold;
- background-color: #fff;
+ color: $pd-title-color;
+ background-color: $pd-title-bg;
}
.pika-prev,
@@ -86,7 +115,9 @@
text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
white-space: nowrap;
overflow: hidden;
- background: transparent no-repeat center center;
+ background-color: transparent;
+ background-position: center center;
+ background-repeat: no-repeat;
background-size: 75% 75%;
opacity: .5;
*position: absolute;
@@ -134,7 +165,7 @@
}
th {
- color: #999;
+ color: $pd-th-color;
font-size: 12px;
line-height: 25px;
font-weight: bold;
@@ -157,35 +188,36 @@
margin: 0;
width: 100%;
padding: 5px;
- color: #666;
+ color: $pd-day-color;
font-size: 12px;
line-height: 15px;
text-align: right;
- background: #f5f5f5;
+ background: $pd-day-bg;
.is-today & {
- color: #33aaff;
+ color: $pd-day-today-color;
font-weight: bold;
}
.is-selected & {
- color: #fff;
+ color: $pd-day-selected-color;
font-weight: bold;
- background: #33aaff;
- box-shadow: inset 0 1px 3px #178fe5;
+ background: $pd-day-selected-bg;
+ box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
border-radius: 3px;
}
- .is-disabled & {
+ .is-disabled &,
+ .is-outside-current-month & {
pointer-events: none;
cursor: default;
- color: #999;
+ color: $pd-day-disabled-color;
opacity: .3;
}
&:hover {
- color: #fff;
- background: #ff8000;
+ color: $pd-day-hover-color;
+ background: $pd-day-hover-bg;
box-shadow: none;
border-radius: 3px;
}
@@ -193,7 +225,7 @@
.pika-week {
font-size: 11px;
- color: #999;
+ color: $pd-week-color;
}
.is-inrange .pika-button {
diff --git a/public/javascripts/pikaday.js b/public/javascripts/pikaday.js
index bc0c64474..7fec0fc46 100644
--- a/public/javascripts/pikaday.js
+++ b/public/javascripts/pikaday.js
@@ -340,7 +340,7 @@
for (i = 0; i < 7; i++) {
arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
}
- return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
+ return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
},
renderTitle = function(instance, c, year, month, refYear)
@@ -357,8 +357,8 @@
for (arr = [], i = 0; i < 12; i++) {
arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
- (i === month ? ' selected': '') +
- ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
+ (i === month ? ' selected="selected"': '') +
+ ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
opts.i18n.months[i] + '</option>');
}
monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
@@ -373,7 +373,7 @@
for (arr = []; i < j && i <= opts.maxYear; i++) {
if (i >= opts.minYear) {
- arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
+ arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"': '') + '>' + (i) + '</option>');
}
}
yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
@@ -428,7 +428,7 @@
}
if (!hasClass(target, 'is-disabled')) {
- if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
+ if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
if (opts.bound) {
sto(function() {
@@ -904,10 +904,7 @@
}
if (typeof this._o.onDraw === 'function') {
- var self = this;
- sto(function() {
- self._o.onDraw.call(self);
- }, 0);
+ this._o.onDraw(this);
}
},