Skip to content

Commit

Permalink
feat(vue3): Migrate NcDatetimePickerNative
Browse files Browse the repository at this point in the history 
Signed-off-by: Raimund Schlüßler <[email protected]>
  • Loading branch information
@raimund-schluessler
raimund-schluessler committed Sep 18, 2023
1 parent 2743bd4 commit 5f95ed0
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 84 deletions.
144 changes: 70 additions & 74 deletions ...mePickerNative/NcDateTimePickerNative.vue → ...mePickerNative/NcDatetimePickerNative.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,21 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
```vue
<template>
<span>
<NcDateTimePickerNative
<NcDatetimePickerNative
v-model="value"
:id="id"
:label="label"
type="datetime-local" />
</span>
The date selected is {{ value }}
</template>
<script>
export default {
data() {
return {
value: new Date(),
id: 'date-time-picker',
label: 'please select a new date',
label: 'Please select a new date',
}
},
}
Expand All @@ -58,7 +59,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
```vue
<template>
<span>
<NcDateTimePickerNative
<NcDatetimePickerNative
v-model="value"
:id="id"
:min="yesterdayDate"
Expand All @@ -74,7 +75,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
return {
value: new Date(),
id: 'date-time-picker',
label: 'please select a new date',
label: 'Please select a new date',
yesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),
someDate: new Date(new Date().setDate(new Date().getDate() + 7)),
}
Expand All @@ -87,7 +88,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
```vue
<template>
<span>
<NcDateTimePickerNative
<NcDatetimePickerNative
v-model="value"
:id="id"
:label="label"
Expand All @@ -101,7 +102,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
return {
value: new Date(),
id: 'date-time-picker',
label: 'please select a new date',
label: 'Please select a new date',
}
},
}
Expand All @@ -112,7 +113,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
```vue
<template>
<span>
<NcDateTimePickerNative
<NcDatetimePickerNative
v-model="value"
:id="id"
:label="label"
Expand All @@ -126,7 +127,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
return {
value: new Date(),
id: 'date-time-picker',
label: 'please select a new date',
label: 'Please select a new date',
}
},
}
Expand All @@ -146,7 +147,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
:min="formattedMin"
:max="formattedMax"
v-bind="$attrs"
v-on="listeners">
@input="onInput">
</div>
</template>

Expand All @@ -155,7 +156,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
const inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']

export default {
name: 'NcDateTimePickerNative',
name: 'NcDatetimePickerNative',
inheritAttrs: false,

props: {
Expand All @@ -164,7 +165,7 @@ export default {
* The selected time zone does not have an influence of the selected time and date value.
* You have to translate the time yourself when you want to factor in time zones.
*/
value: {
modelValue: {
type: Date,
required: true,
},
Expand Down Expand Up @@ -221,7 +222,7 @@ export default {
},
/**
* Class to add to the input field.
* Necessary to use NcDateTimePickerNative in the NcActionInput component.
* Necessary to use NcDatetimePickerNative in the NcActionInput component.
*/
inputClass: {
type: [Object, String],
Expand All @@ -230,12 +231,12 @@ export default {
},

emits: [
'input',
'update:modelValue',
],

computed: {
formattedValue() {
return this.formatValue(this.value)
return this.formatValue(this.modelValue)
},
formattedMin() {
if (this.min) {
Expand All @@ -249,76 +250,71 @@ export default {
}
return false
},
listeners() {
return {
...this.$listeners,
},

methods: {
/**
* Handle the input event
*
* @param {InputEvent} $event input event payload
* @return {Date|string} new chosen Date() or an empty string
*/
onInput($event) {
if (isNaN($event.target.valueAsNumber)) {
/**
* Emitted when the input value changes
*
* @return {string} empty string
*/
return this.$emit('update:modelValue', '')
}
if (this.type === 'time') {
const time = $event.target.value
if (this.modelValue === '') {
// this case is because of Chrome bug
const { yyyy, MM, dd } = this.getReadableDate(new Date())
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))
}
const { yyyy, MM, dd } = this.getReadableDate(this.modelValue)
/**
* Handle the input event
* Emitted when the input value changes
*
* @param {InputEvent} $event input event payload
* @return {Date|string} new chosen Date() or an empty string
* @return {Date} new chosen Date()
*/
input: ($event) => {
if (isNaN($event.target.valueAsNumber)) {
/**
* Emitted when the input value changes
*
* @return {string} empty string
*/
return this.$emit('input', '')
}
if (this.type === 'time') {
const time = $event.target.value
if (this.value === '') {
// this case is because of Chrome bug
const { yyyy, MM, dd } = this.getReadableDate(new Date())
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))
}
const { yyyy, MM, dd } = this.getReadableDate(this.value)
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))
} else if (this.type === 'month') {
const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')
if (this.value === '') {
const { yyyy, dd, hh, mm } = this.getReadableDate(new Date())
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))
}
const { yyyy, dd, hh, mm } = this.getReadableDate(this.value)
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))
}
const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60
const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds
return this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))
} else if (this.type === 'month') {
const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')
if (this.modelValue === '') {
const { yyyy, dd, hh, mm } = this.getReadableDate(new Date())
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('input', new Date(inputDateWithTimezone))
},
return this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))
}
const { yyyy, dd, hh, mm } = this.getReadableDate(this.value)
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))
}
const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60
const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds
/**
* Emitted when the input value changes
*
* @return {Date} new chosen Date()
*/
return this.$emit('update:modelValue', new Date(inputDateWithTimezone))
},
},

methods: {
/**
* Returns Object with string values of a Date
*
Expand Down
6 changes: 3 additions & 3 deletions ...omponents/NcDateTimePickerNative/index.js → ...omponents/NcDatetimePickerNative/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
*
*/

import NcDateTimePickerNative from './NcDateTimePickerNative.vue'
import NcDatetimePickerNative from './NcDatetimePickerNative.vue'
import ScopeComponent from '../../utils/ScopeComponent.js'

ScopeComponent(NcDateTimePickerNative)
ScopeComponent(NcDatetimePickerNative)

export default NcDateTimePickerNative
export default NcDatetimePickerNative
2 changes: 1 addition & 1 deletion src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export { default as NcButton } from './NcButton/index.js'
// export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
export { default as NcDatetime } from './NcDatetime/index.js'
// export { default as NcDatetimePicker } from './NcDatetimePicker/index.js'
// export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
export { default as NcDatetimePickerNative } from './NcDatetimePickerNative/index.js'
// Not exported on purpose
// export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'

Expand Down
13 changes: 7 additions & 6 deletions styleguide.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,12 +202,13 @@ module.exports = async () => {
// 'src/components/NcSelect*/*.vue',
// ],
// },
// {
// name: 'NcPickers',
// components: [
// 'src/components/Nc*Picker*/*.vue',
// ],
// },
{
name: 'NcPickers',
components: [
//'src/components/Nc*Picker*/*.vue',
'src/components/NcDatetimePickerNative*/*.vue',
],
},
// {
// name: 'NcRichText',
// components: [
Expand Down

0 comments on commit 5f95ed0

Please sign in to comment.