nextcloud-libraries / nextcloud-vue

🍱 Vue.js components for Nextcloud app development ✌ https://npmjs.org/@nextcloud/vue
https://nextcloud-vue-components.netlify.app/
Other
217 stars 85 forks source link

ActionInput of type date requires String values but DatetimePicker only works with numbers #793

Closed danxuliu closed 1 year ago

danxuliu commented 4 years ago

The ActionInput requires its value property to be a String, but the DatetimePicker does not work with String values, only numbers. See the following examples:

<template>
    <Actions>
        <ActionInput icon="icon-edit" type="date" :value="timestampNumber">Please pick a date</ActionInput>
        <ActionInput icon="icon-edit" type="date" :value="timestampString">Please pick a date</ActionInput>
    </Actions>
</template>
<script>
export default {
    data() {
        return {
            timestampNumber: 1095869760000,
            timestampString: '1095869760000',
        }
    },
}
</script>
<template>
    <div>
        <DatetimePicker :value="timestampNumber" />
            <DatetimePicker :value="timestampString" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            timestampNumber: 1095869760000,
            timestampString: '1095869760000',
        }
    },
}
</script>

Thus, although the ActionInput of type date works with a number value it shows an error in the browser console due to the failed type validation.

The reason is that the value property passed to the DatetimePicker component needs to be a number, as vue2-datepicker internally uses new Date(value) to validate and transform it.

This could be fixed by changing the type of the value property of ActionInput to accept numbers too or, even better, to adjust the DatetimePicker component to transform under the hood a String value to a number value.

Note that the vue2-datepicker component in 2.10 provided a way to customize how the value was transformed, but that seems to be gone in the 3.x versions, so to ease a future update to the 3.x versions it might be better to just use a computed property in DatetimePicker that transforms the given value to a number before passing it to the vue2-datepicker.

raimund-schluessler commented 1 year ago

NcActionInput allows numbers now as well: https://github.com/nextcloud/nextcloud-vue/blob/ebf538c3b1458ca0558faf13226d0e4ba031ef5d/src/components/NcActionInput/NcActionInput.vue#L323-L329