99 :title-placeholder =" answerType.titlePlaceholder"
1010 :warning-invalid =" answerType.warningInvalid"
1111 v-on =" commonListeners" >
12+ <template v-if =" answerType .pickerType === ' date' " #actions >
13+ <NcActionInput
14+ v-model =" dateMin"
15+ type =" date"
16+ :label =" t('forms', 'Pick minimum date')"
17+ hide-label
18+ :formatter =" extraSettingsFormatter"
19+ is-native-picker
20+ :max =" dateMax" >
21+ <template #icon >
22+ <Pencil :size =" 20" />
23+ </template >
24+ </NcActionInput >
25+ <NcActionInput
26+ v-model =" dateMax"
27+ type =" date"
28+ :label =" t('forms', 'Pick maximum date')"
29+ hide-label
30+ :formatter =" extraSettingsFormatter"
31+ is-native-picker
32+ :min =" dateMin" >
33+ <template #icon >
34+ <Pencil :size =" 20" />
35+ </template >
36+ </NcActionInput >
37+ </template >
1238 <div class =" question__content" >
1339 <NcDateTimePicker
1440 :value =" time"
1743 :placeholder =" datetimePickerPlaceholder"
1844 :show-second =" false"
1945 :type =" answerType.pickerType"
46+ :disabled-date =" disabledDates"
2047 :input-attr =" inputAttr"
2148 @change =" onValueChange" />
2249 </div >
2552
2653<script >
2754import moment from ' @nextcloud/moment'
28-
2955import QuestionMixin from ' ../../mixins/QuestionMixin.js'
56+ import NcActionInput from ' @nextcloud/vue/components/NcActionInput'
3057import NcDateTimePicker from ' @nextcloud/vue/components/NcDateTimePicker'
58+ import Pencil from ' vue-material-design-icons/Pencil.vue'
3159
3260export default {
3361 name: ' QuestionDate' ,
3462
3563 components: {
64+ NcActionInput,
3665 NcDateTimePicker,
66+ Pencil,
3767 },
3868
3969 mixins: [QuestionMixin],
@@ -44,6 +74,10 @@ export default {
4474 stringify: this .stringify ,
4575 parse: this .parse ,
4676 },
77+ extraSettingsFormatter: {
78+ stringify: this .stringifyDate ,
79+ parse: this .parseTimestampToDate ,
80+ },
4781 }
4882 },
4983
@@ -70,6 +104,38 @@ export default {
70104 time () {
71105 return this .values ? this .parse (this .values [0 ]) : null
72106 },
107+
108+ /**
109+ * The maximum allowable date for the date input field
110+ */
111+ dateMax: {
112+ get () {
113+ return this .extraSettings ? .dateMax
114+ ? moment (this .extraSettings .dateMax , ' X' ).toDate ()
115+ : null
116+ },
117+ set (value ) {
118+ this .onExtraSettingsChange ({
119+ dateMax: parseInt (moment (value).format (' X' )),
120+ })
121+ },
122+ },
123+
124+ /**
125+ * The minimum allowable date for the date input field
126+ */
127+ dateMin: {
128+ get () {
129+ return this .extraSettings ? .dateMin
130+ ? moment (this .extraSettings .dateMin , ' X' ).toDate ()
131+ : null
132+ },
133+ set (value ) {
134+ this .onExtraSettingsChange ({
135+ dateMin: parseInt (moment (value).format (' X' )),
136+ })
137+ },
138+ },
73139 },
74140
75141 methods: {
@@ -106,6 +172,39 @@ export default {
106172 moment (date).format (this .answerType .storageFormat ),
107173 ])
108174 },
175+
176+ /**
177+ * Determines if a given date should be disabled.
178+ *
179+ * @param {Date} date - The date to check.
180+ * @return {boolean} - Returns true if the date should be disabled, otherwise false.
181+ */
182+ disabledDates (date ) {
183+ return (
184+ (this .dateMin && date < this .dateMin ) ||
185+ (this .dateMax && date > this .dateMax )
186+ )
187+ },
188+
189+ /**
190+ * Datepicker timestamp to string
191+ *
192+ * @param {Date} datetime the datepicker Date
193+ * @return {string}
194+ */
195+ stringifyDate (datetime ) {
196+ return moment (datetime).format (' L' )
197+ },
198+
199+ /**
200+ * Form expires timestamp to Date of the datepicker
201+ *
202+ * @param {number} value the expires timestamp
203+ * @return {Date}
204+ */
205+ parseTimestampToDate (value ) {
206+ return moment (value, ' X' ).toDate ()
207+ },
109208 },
110209}
111210< / script>
0 commit comments