99 :title-placeholder="answerType.titlePlaceholder"
1010 :warning-invalid="answerType.warningInvalid"
1111 v-on="commonListeners">
12+ <template v-if="answerType.pickerType === 'date'" #actions>
13+ <NcActionCheckbox
14+ :checked="extraSettings?.dateRange"
15+ @update:checked="onDateRangeChange">
16+ {{ t('forms', 'Query date range') }}
17+ </NcActionCheckbox>
18+ <NcActionInput
19+ v-model="dateMin"
20+ type="date"
21+ :label="t('forms', 'Pick minimum date')"
22+ hide-label
23+ :formatter="extraSettingsFormatter"
24+ is-native-picker
25+ :max="dateMax">
26+ <template #icon>
27+ <Pencil :size="20" />
28+ </template>
29+ </NcActionInput>
30+ <NcActionInput
31+ v-model="dateMax"
32+ type="date"
33+ :label="t('forms', 'Pick maximum date')"
34+ hide-label
35+ :formatter="extraSettingsFormatter"
36+ is-native-picker
37+ :min="dateMin">
38+ <template #icon>
39+ <Pencil :size="20" />
40+ </template>
41+ </NcActionInput>
42+ </template>
1243 <div class="question__content">
1344 <NcDateTimePicker
1445 :value="time"
1748 :placeholder="datetimePickerPlaceholder"
1849 :show-second="false"
1950 :type="answerType.pickerType"
51+ :disabled-date="disabledDates"
2052 :input-attr="inputAttr"
53+ :range="extraSettings?.dateRange"
54+ range-separator=" - "
2155 @change="onValueChange" />
2256 </div>
2357 </Question>
2458</template>
2559
2660<script>
2761import moment from '@nextcloud/moment'
28-
2962import QuestionMixin from '../../mixins/QuestionMixin.js'
63+ import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
64+ import NcActionInput from '@nextcloud/vue/components/NcActionInput'
3065import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
66+ import Pencil from 'vue-material-design-icons/Pencil.vue'
3167
3268export default {
3369 name: 'QuestionDate',
3470
3571 components: {
72+ NcActionCheckbox,
73+ NcActionInput,
3674 NcDateTimePicker,
75+ Pencil,
3776 },
3877
3978 mixins: [QuestionMixin],
@@ -44,15 +83,23 @@ export default {
4483 stringify: this.stringify,
4584 parse: this.parse,
4685 },
86+ extraSettingsFormatter: {
87+ stringify: this.stringifyDate,
88+ parse: this.parseTimestampToDate,
89+ },
4790 }
4891 },
4992
5093 computed: {
5194 datetimePickerPlaceholder() {
5295 if (this.readOnly) {
53- return this.answerType.submitPlaceholder
96+ return this.question.extraSettings?.dateRange
97+ ? this.answerType.submitPlaceholderRange
98+ : this.answerType.submitPlaceholder
5499 }
55- return this.answerType.createPlaceholder
100+ return this.question.extraSettings?.dateRange
101+ ? this.answerType.createPlaceholderRange
102+ : this.answerType.createPlaceholder
56103 },
57104
58105 /**
@@ -68,8 +115,45 @@ export default {
68115 },
69116
70117 time() {
118+ if (this.extraSettings?.dateRange) {
119+ return this.values
120+ ? [this.parse(this.values[0]), this.parse(this.values[1])]
121+ : null
122+ }
71123 return this.values ? this.parse(this.values[0]) : null
72124 },
125+
126+ /**
127+ * The maximum allowable date for the date input field
128+ */
129+ dateMax: {
130+ get() {
131+ return this.extraSettings?.dateMax
132+ ? moment(this.extraSettings.dateMax, 'X').toDate()
133+ : null
134+ },
135+ set(value) {
136+ this.onExtraSettingsChange({
137+ dateMax: parseInt(moment(value).format('X')),
138+ })
139+ },
140+ },
141+
142+ /**
143+ * The minimum allowable date for the date input field
144+ */
145+ dateMin: {
146+ get() {
147+ return this.extraSettings?.dateMin
148+ ? moment(this.extraSettings.dateMin, 'X').toDate()
149+ : null
150+ },
151+ set(value) {
152+ this.onExtraSettingsChange({
153+ dateMin: parseInt(moment(value).format('X')),
154+ })
155+ },
156+ },
73157 },
74158
75159 methods: {
@@ -99,12 +183,63 @@ export default {
99183 /**
100184 * Store Value
101185 *
102- * @param {Date} date The date to store
186+ * @param {Date|Array<Date> } date The date or date range to store
103187 */
104188 onValueChange(date) {
105- this.$emit('update:values', [
106- moment(date).format(this.answerType.storageFormat),
107- ])
189+ if (this.extraSettings?.dateRange) {
190+ this.$emit('update:values', [
191+ moment(date[0]).format(this.answerType.storageFormat),
192+ moment(date[1]).format(this.answerType.storageFormat),
193+ ])
194+ } else {
195+ this.$emit('update:values', [
196+ moment(date).format(this.answerType.storageFormat),
197+ ])
198+ }
199+ },
200+
201+ /**
202+ * Handles the change event for the date range setting.
203+ *
204+ * @param {boolean} checked - Indicates whether the date range option is enabled (true) or disabled (false).
205+ * Updates the extra settings with the date range value. If `checked` is true, the date range is set;
206+ * otherwise, it is set to null.
207+ */
208+ onDateRangeChange(checked) {
209+ this.onExtraSettingsChange({ dateRange: checked === true ?? null })
210+ },
211+
212+ /**
213+ * Determines if a given date should be disabled.
214+ *
215+ * @param {Date} date - The date to check.
216+ * @return {boolean} - Returns true if the date should be disabled, otherwise false.
217+ */
218+ disabledDates(date) {
219+ return (
220+ (this.dateMin && date < this.dateMin) ||
221+ (this.dateMax && date > this.dateMax)
222+ )
223+ },
224+
225+ /**
226+ * Datepicker timestamp to string
227+ *
228+ * @param {Date} datetime the datepicker Date
229+ * @return {string}
230+ */
231+ stringifyDate(datetime) {
232+ return moment(datetime).format('L')
233+ },
234+
235+ /**
236+ * Form expires timestamp to Date of the datepicker
237+ *
238+ * @param {number} value the expires timestamp
239+ * @return {Date}
240+ */
241+ parseTimestampToDate(value) {
242+ return moment(value, 'X').toDate()
108243 },
109244 },
110245}
0 commit comments