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

FIX: makes clicking and displaying date picker more reliable (#9302)

This commit is contained in:
Joffrey JAFFEUX 2020-03-30 22:02:24 +02:00 committed by GitHub
parent db35baba26
commit 339ddb8701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/assets/javascripts/discourse/components/date-input.js
View File

@ -1,4 +1,4 @@
import { next } from "@ember/runloop"; import { schedule } from "@ember/runloop";
import Component from "@ember/component"; import Component from "@ember/component";
/* global Pikaday:true */ /* global Pikaday:true */
import loadScript from "discourse/lib/load-script"; import loadScript from "discourse/lib/load-script";
@ -16,17 +16,19 @@ export default Component.extend({
@on("didInsertElement") @on("didInsertElement")
_loadDatePicker() { _loadDatePicker() {
const container = this.element.querySelector(`#${this.containerId}`); schedule("afterRender", () => {
const container = this.element.querySelector(`#${this.containerId}`);
if (this.site.mobileView) { if (this.site.mobileView) {
this._loadNativePicker(container); this._loadNativePicker(container);
} else { } else {
this._loadPikadayPicker(container); this._loadPikadayPicker(container);
} }
if (this.date && this._picker) { if (this.date && this._picker) {
this._picker.setDate(this.date, true); this._picker.setDate(this.date, true);
} }
});
}, },
didUpdateAttrs() { didUpdateAttrs() {
@ -44,26 +46,25 @@ export default Component.extend({
_loadPikadayPicker(container) { _loadPikadayPicker(container) {
loadScript("/javascripts/pikaday.js").then(() => { loadScript("/javascripts/pikaday.js").then(() => {
next(() => { const defaultOptions = {
const default_opts = { field: this.element.querySelector(".date-picker"),
field: this.element.querySelector(".date-picker"), container: container || this.element.querySelector(".picker-container"),
container: container || this.element, bound: container === null,
bound: container === null, format: "LL",
format: "LL", firstDay: 1,
firstDay: 1, trigger: this.element,
i18n: { i18n: {
previousMonth: I18n.t("dates.previous_month"), previousMonth: I18n.t("dates.previous_month"),
nextMonth: I18n.t("dates.next_month"), nextMonth: I18n.t("dates.next_month"),
months: moment.months(), months: moment.months(),
weekdays: moment.weekdays(), weekdays: moment.weekdays(),
weekdaysShort: moment.weekdaysShort() weekdaysShort: moment.weekdaysShort()
}, },
onSelect: date => this._handleSelection(date) onSelect: date => this._handleSelection(date)
}; };
this._picker = new Pikaday(Object.assign(default_opts, this._opts())); this._picker = new Pikaday(Object.assign(defaultOptions, this._opts()));
this._picker.setDate(this.date, true); this._picker.setDate(this.date, true);
});
}); });
}, },

3
app/assets/javascripts/discourse/templates/components/date-input.hbs
View File

@ -4,4 +4,7 @@
placeholder=placeholder placeholder=placeholder
value=value value=value
input=(action "onInput") input=(action "onInput")
readonly=true
}} }}
<div class="picker-container"></div>

3
app/assets/stylesheets/common/components/date-input.scss
View File

@ -1,8 +1,11 @@
.d-date-input { .d-date-input {
display: flex; display: flex;
flex: 1; flex: 1;
cursor: pointer;
flex-direction: column;
.date-picker { .date-picker {
cursor: pointer;
margin: 0; margin: 0;
text-align: left; text-align: left;
width: 100%; width: 100%;