enh: use NcDateTimePickerNative

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
nextcloud · Feb 7, 2024 · 8acd1a9 · 8acd1a9
1 parent bf25d4d
commit 8acd1a9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 24 deletions.
diff --git a/cypress/e2e/column-datetime.cy.js b/cypress/e2e/column-datetime.cy.js
@@ -26,7 +26,7 @@ describe('Test column ' + columnTitle, () => {
 
 		// insert row with int value
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content input').first().clear().type('2023-12-24 05:15')
+		cy.get('.modal__content input').first().clear().type('2023-12-24T05:15')
 		cy.get('[data-cy="createRowAddMoreSwitch"]').click().click()
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('24').should('be.visible')
@@ -49,7 +49,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.createDatetimeColumn(columnTitle, true, true)
 
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content input').first().should('contain.value', '2023-12-24 07:21')
+		cy.get('.modal__content input').first().should('contain.value', '2023-12-24T07:21')
 		cy.get('[data-cy="createRowAddMoreSwitch"]').click().click()
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('7:').should('be.visible')

diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
@@ -1,22 +1,19 @@
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePicker v-model="localValue"
-			type="date"
-			format="YYYY-MM-DD"
-			:clearable="false"
-			:show-week-number="true" />
+		<NcDateTimePickerNative id="datetime-date-picker" v-model="localValue"
+			type="date" />
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
 </template>
 
 <script>
-import { NcDateTimePicker } from '@nextcloud/vue'
+import { NcDateTimePickerNative } from '@nextcloud/vue'
 import Moment from '@nextcloud/moment'
 import RowFormWrapper from './RowFormWrapper.vue'
 
 export default {
 	components: {
-		NcDateTimePicker,
+		NcDateTimePickerNative,
 		RowFormWrapper,
 	},
 	props: {

diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
@@ -1,22 +1,19 @@
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePicker v-model="localValue"
-			type="datetime"
-			format="YYYY-MM-DD HH:mm"
-			:clearable="false"
-			:show-week-number="true" />
+		<NcDateTimePickerNative id="datetime-picker" v-model="localValue"
+			type="datetime-local"/>
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
 </template>
 
 <script>
-import { NcDateTimePicker } from '@nextcloud/vue'
+import { NcDateTimePickerNative } from '@nextcloud/vue'
 import Moment from '@nextcloud/moment'
 import RowFormWrapper from './RowFormWrapper.vue'
 
 export default {
 	components: {
-		NcDateTimePicker,
+		NcDateTimePickerNative,
 		RowFormWrapper,
 	},
 	props: {

diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
@@ -1,22 +1,19 @@
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePicker v-model="localValue"
-			type="time"
-			format="HH:mm"
-			:clearable="false"
-			:show-week-number="true" />
+		<NcDateTimePickerNative id="datetime-time-picker" v-model="localValue" :label="t('tables', 'Please select a new time')"
+			type="time"/>
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
 </template>
 
 <script>
-import { NcDateTimePicker } from '@nextcloud/vue'
+import { NcDateTimePickerNative } from '@nextcloud/vue'
 import Moment from '@nextcloud/moment'
 import RowFormWrapper from './RowFormWrapper.vue'
 
 export default {
 	components: {
-		NcDateTimePicker,
+		NcDateTimePickerNative,
 		RowFormWrapper,
 	},
 	props: {
@@ -39,14 +36,15 @@ export default {
 		},
 		localValue: {
 			get() {
+				console.log(this.value)
 				if (this.value !== null && this.value !== 'none') {
 					return Moment(this.value, 'HH:mm').toDate()
 				} else if (this.value === null && this.column.datetimeDefault === 'now') {
 					const dt = Moment()
 					this.$emit('update:value', dt.format('HH:mm'))
 					return dt.toDate()
 				} else {
-					return null
+					return new Date()
 				}
 			},
 			set(v) {