diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php index ea9a0df..5fdb161 100644 --- a/app/Http/Requests/UserFormRequest.php +++ b/app/Http/Requests/UserFormRequest.php @@ -104,6 +104,8 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest 'properties.*.prefill_today' => 'boolean|nullable', 'properties.*.disable_past_dates' => 'boolean|nullable', 'properties.*.disable_future_dates' => 'boolean|nullable', + 'properties.*.simple_date_input' => 'boolean|nullable', + 'properties.*.simple_date_input_format' => 'string|nullable', // Select / Multi Select field 'properties.*.allow_creation' => 'boolean|nullable', diff --git a/package.json b/package.json index e0c9849..d858269 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@sentry/vue": "^6.11.0", "axios": "^0.21.1", "chart.js": "^3.7.1", + "cleave.js": "^1.6.0", "clone-deep": "^4.0.1", "date-fns": "^2.28.0", "debounce": "^1.2.1", diff --git a/resources/js/components/forms/SimpleDateInput.vue b/resources/js/components/forms/SimpleDateInput.vue new file mode 100644 index 0000000..ffc8a83 --- /dev/null +++ b/resources/js/components/forms/SimpleDateInput.vue @@ -0,0 +1,99 @@ + + + diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js index 70fad78..b3d7238 100644 --- a/resources/js/components/forms/index.js +++ b/resources/js/components/forms/index.js @@ -17,6 +17,7 @@ import DateInput from './DateInput'; import RatingInput from './RatingInput'; import FlatSelectInput from './FlatSelectInput'; import ToggleSwitchInput from './ToggleSwitchInput'; +import SimpleDateInput from './SimpleDateInput'; // Components that are registered globaly. [ @@ -36,7 +37,8 @@ import ToggleSwitchInput from './ToggleSwitchInput'; DateInput, RatingInput, FlatSelectInput, - ToggleSwitchInput + ToggleSwitchInput, + SimpleDateInput ].forEach(Component => { Vue.component(Component.name, Component) }) diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue index 6ae264d..5a27981 100644 --- a/resources/js/components/open/forms/OpenForm.vue +++ b/resources/js/components/open/forms/OpenForm.vue @@ -348,6 +348,9 @@ export default { if (field.type === 'checkbox' && field.use_toggle_switch) { return 'ToggleSwitchInput' } + if (field.type === 'date' && field.simple_date_input) { + return 'SimpleDateInput' + } return this.fieldComponents[field.type] }, getFieldClasses (field) { @@ -408,6 +411,9 @@ export default { }else if (field.disable_future_dates) { inputProperties.disableFutureDates = true } + if (field.simple_date_input && field.simple_date_input_format) { + inputProperties.dateFormat = field.simple_date_input_format + } } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) { inputProperties.multiple = (field.multiple !== undefined && field.multiple) inputProperties.mbLimit = 5 diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue index b37cbb5..f1b3b99 100644 --- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue +++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue @@ -181,6 +181,17 @@ > Disable future dates + + + Simple date input + + @@ -412,6 +423,16 @@ export default { return this.field[this.field.type].options.map(option => { return option.name }).join("\n") + }, + dateFormatOptions () { + if (this.field.type !== 'date') return [] + let formats = ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD'] + return formats.map((format) => { + return { + name: format, + value: format + } + }) } }, @@ -421,6 +442,9 @@ export default { if(['text','number','url','email','phone_number'].includes(this.field.type) && !this.field.max_char_limit){ this.field.max_char_limit = 2000 } + if(this.field.type == 'date' && !this.field.simple_date_input_format){ + this.field.simple_date_input_format = this.dateFormatOptions[0]['value'] + } }, methods: { @@ -455,6 +479,7 @@ export default { if (this.field.date_range) { this.$set(this.field, 'with_time', false) this.$set(this.field, 'prefill_today', false) + this.$set(this.field, 'simple_date_input', false) } }, onFieldWithTimeChange (val) { @@ -462,6 +487,7 @@ export default { this.$set(this.field, 'use_am_pm', false) if (this.field.with_time) { this.$set(this.field, 'date_range', false) + this.$set(this.field, 'simple_date_input', false) } }, onFieldGenUIdChange (val) { @@ -529,6 +555,13 @@ export default { this.$set(this.field, 'disable_past_dates', false) this.$set(this.field, 'prefill_today', false) } + }, + onFieldSimpleDateInputChange (val) { + this.$set(this.field, 'simple_date_input', val) + if (this.field.simple_date_input) { + this.$set(this.field, 'with_time', false) + this.$set(this.field, 'date_range', false) + } } } }