Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: date picker on mobile 

UPDATE pickaday.js to latest version
This commit is contained in:
Régis Hanol 2016-01-20 21:06:41 +01:00
parent 74b5d063f9
commit c79a8e836e
4 changed files with 64 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/components/date-picker.js.es6
View File

@ -3,17 +3,17 @@ import loadScript from "discourse/lib/load-script";
import { on } from "ember-addons/ember-computed-decorators";
export default Em.Component.extend({
tagName: "input",
classNames: ["date-picker"],
classNames: ["date-picker-wrapper"],
_picker: null,
@on("didInsertElement")
_loadDatePicker() {
const input = this.$()[0];
const input = this.$(".date-picker")[0];
loadScript("/javascripts/pikaday.js").then(() => {
const default_opts = {
let default_opts = {
field: input,
container: this.$()[0],
format: "YYYY-MM-DD",
defaultDate: moment().add(1, "day").toDate(),
minDate: new Date(),
@ -29,7 +29,7 @@ export default Em.Component.extend({
this._picker = null;
},
_opts: function() {
_opts() {
return null;
}

1
app/assets/javascripts/discourse/templates/components/date-picker.hbs Normal file
View File

@ -0,0 +1 @@
<input class="date-picker">

9
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -33,6 +33,15 @@
}
}
.date-picker-wrapper {
display: inline-block;
position: relative;
}
.pika-single {
position: absolute !important;
}
.modal-body.feature-topic {
padding: 5px;
max-height: 500px;

59
public/javascripts/pikaday.js
View File

@ -202,6 +202,9 @@
// first day of week (0: Sunday, 1: Monday etc)
firstDay: 0,
// the default flag for moment's strict date parsing
formatStrict: false,
// the minimum/earliest date that can be selected
minDate: null,
// the maximum/latest date that can be selected
@ -230,6 +233,9 @@
// Render the month after year in the calendar title
showMonthAfterYear: false,
// Render days of the calendar grid that fall in the next or previous month
showDaysInNextAndPreviousMonths: false,
// how many months are visible
numberOfMonths: 1,
@ -274,10 +280,14 @@
renderDay = function(opts)
{
var arr = [];
if (opts.isEmpty) {
if (opts.showDaysInNextAndPreviousMonths) {
arr.push('is-outside-current-month');
} else {
return '<td class="is-empty"></td>';
}
var arr = [];
}
if (opts.isDisabled) {
arr.push('is-disabled');
}
@ -417,7 +427,7 @@
return;
}
if (!hasClass(target.parentNode, 'is-disabled')) {
if (!hasClass(target, 'is-disabled')) {
if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
if (opts.bound) {
@ -472,7 +482,7 @@
return;
}
if (hasMoment) {
date = moment(opts.field.value, opts.format);
date = moment(opts.field.value, opts.format, opts.formatStrict);
date = (date && date.isValid()) ? date.toDate() : null;
}
else {
@ -638,9 +648,7 @@
this.setMinDate(opts.minDate);
}
if (opts.maxDate) {
setToStartOfDay(opts.maxDate);
opts.maxYear = opts.maxDate.getFullYear();
opts.maxMonth = opts.maxDate.getMonth();
this.setMaxDate(opts.maxDate);
}
if (isArray(opts.yearRange)) {
@ -828,6 +836,7 @@
this._o.minDate = value;
this._o.minYear = value.getFullYear();
this._o.minMonth = value.getMonth();
this.draw();
},
/**
@ -835,7 +844,11 @@
*/
setMaxDate: function(value)
{
setToStartOfDay(value);
this._o.maxDate = value;
this._o.maxYear = value.getFullYear();
this._o.maxMonth = value.getMonth();
this.draw();
},
setStartRange: function(value)
@ -967,6 +980,11 @@
before += 7;
}
}
var previousMonth = month === 0 ? 11 : month - 1,
nextMonth = month === 11 ? 0 : month + 1,
yearOfPreviousMonth = month === 0 ? year - 1 : year,
yearOfNextMonth = month === 11 ? year + 1 : year,
daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
var cells = days + before,
after = cells;
while(after > 7) {
@ -979,24 +997,41 @@
isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
isToday = compareDates(day, now),
isEmpty = i < before || i >= (days + before),
dayNumber = 1 + (i - before),
monthNumber = month,
yearNumber = year,
isStartRange = opts.startRange && compareDates(opts.startRange, day),
isEndRange = opts.endRange && compareDates(opts.endRange, day),
isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
isDisabled = (opts.minDate && day < opts.minDate) ||
(opts.maxDate && day > opts.maxDate) ||
(opts.disableWeekends && isWeekend(day)) ||
(opts.disableDayFn && opts.disableDayFn(day)),
dayConfig = {
day: 1 + (i - before),
month: month,
year: year,
(opts.disableDayFn && opts.disableDayFn(day));
if (isEmpty) {
if (i < before) {
dayNumber = daysInPreviousMonth + dayNumber;
monthNumber = previousMonth;
yearNumber = yearOfPreviousMonth;
} else {
dayNumber = dayNumber - days;
monthNumber = nextMonth;
yearNumber = yearOfNextMonth;
}
}
var dayConfig = {
day: dayNumber,
month: monthNumber,
year: yearNumber,
isSelected: isSelected,
isToday: isToday,
isDisabled: isDisabled,
isEmpty: isEmpty,
isStartRange: isStartRange,
isEndRange: isEndRange,
isInRange: isInRange
isInRange: isInRange,
showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths
};
row.push(renderDay(dayConfig));