add uiType "datetime"

app/src/attrs/DateTimeAttr.vue

@@ -0,0 +1,51 @@
+<template>
+  <my-bootstrap-form-group :name="name" :opts="opts" :validity="validity">
+    <input-with-validity :name="name" v-model="val" type="datetime-local"
+        :disabled="opts.readOnly"
+        :min="min" :max="max" :required="!opts.optional" :validity.sync="validity[name]"></input-with-validity>
+    <CurrentLdapValue :value="initial_val" :ldap_value="ldap_val" @input="v => val = v"></CurrentLdapValue>
+    <span class="attr-description" v-html="opts.description"></span>
+  </my-bootstrap-form-group>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { formatDate, to_absolute_date } from "../services/helpers";
+import CurrentLdapValue from './CurrentLdapValue.vue';
+
+const init = (d: Date) => formatDate(d, 'yyyy-MM-ddTHH:mm');
+
+export default Vue.extend({
+    props: ['name', 'value', 'ldap_value', 'opts'],
+    components: { CurrentLdapValue },
+    data() {
+        const val = init(this.value);
+        const ldap_val = init(this.ldap_value);
+        return {
+            validity: { [this.name]: {} },
+            val,
+            ldap_val,
+            initial_val: val, 
+        };
+    },
+    watch: {
+        value(datetime) {
+            if (datetime && datetime !== this.datetime) this.val = init(datetime);
+        },
+        datetime(datetime) {
+            this.$emit('input', datetime);
+        },
+    },
+    computed: {
+        datetime() {
+            return this.val && new Date(this.val) || undefined;
+        },
+        min() {
+            return init(to_absolute_date(this.opts.minDate));
+        },
+        max() {
+            return init(to_absolute_date(this.opts.maxDate));
+        },
+    },
+});
+</script>

app/src/attrs/attrsForm.html

@@ -1,4 +1,4 @@
-<form novalidate name="myForm" v-on-submit.prevent="submit" class="form-horizontal" :class="[ submitted ? 'submitted' : '' ]">
+<form :novalidate="!browser_validate" name="myForm" v-on-submit.prevent="submit" class="form-horizontal" :class="[ submitted ? 'submitted' : '' ]">
 
    <fieldset v-if="v.Shib_Identity_Provider">  
     <my-bootstrap-form-group name="Shib_Identity_Provider" label="Etablissement">

app/src/attrs/attrsForm.ts

@@ -1,6 +1,6 @@
 import Vue from "vue";
 
-import { pickBy, findKey, find, isEmpty, uniq } from 'lodash';
+import { pickBy, findKey, find, isEmpty, uniq, some } from 'lodash';
 import * as Helpers from '../services/helpers';
 import genericAttr from './genericAttr.vue';
 
@@ -43,6 +43,11 @@ export default Vue.extend({
         attrs_outside_tabs() {
             return pickBy(this.attrs, (opts, _) => opts.uiType !== 'homonym' && opts.uiType !== 'tab');
         },
+        browser_validate() {
+            // when you set the date part of a datetime, the input is not valid, but we can't know it with Vue
+            // => we force default browser validation, which is quite ok (but will not handle our tabs)
+            return some(this.attrs, (opts, _) => opts.uiType === 'datetime');
+        },
     },
     methods: {
       submit(event) {

app/src/attrs/genericAttr.vue

@@ -11,6 +11,11 @@
     :opts="opts">
   </DateThreeInputsAttr>
 
+  <DateTimeAttr v-model="val" :name="name" v-else-if="uiType === 'datetime'"
+    :ldap_value="ldap_value"
+    :opts="opts">
+  </DateTimeAttr>
+
   <ReadOnlyObjectItems :v_array="val" v-else-if="opts.items && opts.items.properties" 
     :opts="opts" />
 
@@ -138,6 +143,7 @@ import { formatValue } from '../../../shared/v_utils'
 import * as Ws from '../services/ws';
 
 import DateAttr from './DateAttr.vue';
+import DateTimeAttr from './DateTimeAttr.vue';
 import DateThreeInputsAttr from './DateThreeInputsAttr.vue';
 import AddressAttr from './AddressAttr.vue';
 import ArrayAttr from './ArrayAttr.vue';
@@ -158,7 +164,7 @@ function add_to_oneOf_if_missing(choices: Ws.StepAttrOptionChoices[], to_have) {
 export default Vue.extend({
     props: ['value', 'real_name', 'name', 'opts', 'v', 'ldap_value', 'stepName', 'array_allowed_actions_'],
     components: { 
-        DateAttr, DateThreeInputsAttr, ArrayAttr, ReadOnlyObjectItems, AddressAttr, cameraSnapshotAttr, PasswordAttr, AutocompleteAttr, CurrentLdapValue, FileUploadAttr,
+        DateAttr, DateTimeAttr, DateThreeInputsAttr, ArrayAttr, ReadOnlyObjectItems, AddressAttr, cameraSnapshotAttr, PasswordAttr, AutocompleteAttr, CurrentLdapValue, FileUploadAttr,
         PhotoUploadAttr: () => import('./PhotoUploadAttr.vue'),
     },
     data() {

app/src/controllers/Playground.vue

@@ -81,6 +81,7 @@ const tests: (Omit<ClientSideSVA, 'stepName'> & { test_name: string })[] = [
             native_date: { title: 'Native', "description": "May not work on some browsers, notably Firefox Desktop and IE.", uiType: 'date', minDate: '-50SY', maxDate: '+10EY', uiOptions: { date_todayButton: 'Now' } },
             // @ts-expect-error
             alternative_date: { title: 'Alternative', description: 'These work on most platforms.', uiType: 'dateThreeInputs', minDate: '-50SY', maxDate: '+10EY' },
+            datetime: { title: 'Date + time', uiType: 'datetime', optional: true },
         },
         v: {},
     },

app/src/services/ws.ts

@@ -91,6 +91,7 @@ function _jpeg_data_URL_to_base64(data_URL: string): string {
 
 const attr_format_to_converter = {
     'date': { fromWs: (val: string) => new Date(val), toWs: (val: Date) => val.toJSON(), fromCSV: _fromCSVDate },
+    'datetime': { fromWs: (val: string) => new Date(val), toWs: (val: Date) => val.toJSON(), fromCSV: _fromCSVDate },
     'image/jpeg': { fromWs: _base64_to_jpeg_data_URL, toWs: _jpeg_data_URL_to_base64 },
     'phone': { fromWs: Helpers.maybeFormatPhone("0"), toWs: Helpers.maybeFormatPhone("+33 ") },
 }

shared/types.d.ts

@@ -3,8 +3,9 @@ type ForbiddenProperty<Keys extends string> = Partial<Record<Keys, void>>
 
 type uiTypes =
     'radio'|'select'|'checkbox'|'email'|'password'|'text'|'integer'|'number'|'url' |
-    'textarea'|'phone'|'frenchMobilePhone'|'frenchPostalCode'|'date' |
-    'dateThreeInputs'|'postalAddress'|'cameraSnapshot'|'photoUpload'|'fileUpload' |
+    'textarea'|'phone'|'frenchMobilePhone'|'frenchPostalCode'|
+    'date' |' dateThreeInputs' | 'datetime' |
+    'postalAddress'|'cameraSnapshot'|'photoUpload'|'fileUpload' |
     'autocomplete'|'newPassword'|'siret' | 'array' |
     'homonym' | 'queryParamForActionPre' |
     'tab' | 'iframe' |