@nextcloud/vueNcDateTimePickerNative
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| value | The date is – like the Date object in JavaScript – tied to UTC.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. | date | - | |
| id | id attribute of the input field | string | - | |
| type | type attribute of the input field default type: String The type of the input element, it can be date, datetime-local, month, time, week | string | - | 'date' |
| label | text inside the label element default type: String | string | - | 'Please choose a date' |
| min | min attribute of the input field default type: null | date|boolean | - | null |
| max | max attribute of the input field default type: null | date|boolean | - | null |
| hideLabel | Flag to hide the label default type: String The hidden input label for accessibility purposes. | boolean | - | false |
Events
| Event name | Properties | Description |
|---|---|---|
| input | Emitted when the input value changes |
General description
This components provides a wrapper around the native browser datetime picker.
This is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local).
All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#
Examples
Usage: type='datetime-local'
vue
<template>
<span>
<NcDateTimePickerNative
v-model="value"
:id="id"
:label="label"
type="datetime-local"
/>
</span>
</template>
<script>
export default {
data() {
return {
value: new Date(),
id: "date-time-picker",
label: "please select a new date"
};
}
};
</script>
Usage: type='datetime-local' with min date and max date
vue
<template>
<span>
<NcDateTimePickerNative
v-model="value"
:id="id"
:min="yesterdayDate"
:max="someDate"
:label="label"
type="datetime-local"
/>
</span>
</template>
<script>
export default {
data() {
return {
value: new Date(),
id: "date-time-picker",
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))
};
}
};
</script>
Usage: type='week'
vue
<template>
<span>
<NcDateTimePickerNative
v-model="value"
:id="id"
:label="label"
type="week"
/>
</span>
</template>
<script>
export default {
data() {
return {
value: new Date(),
id: "date-time-picker",
label: "please select a new date"
};
}
};
</script>
Usage: type='month'
vue
<template>
<span>
<NcDateTimePickerNative
v-model="value"
:id="id"
:label="label"
type="month"
/>
</span>
</template>
<script>
export default {
data() {
return {
value: new Date(),
id: "date-time-picker",
label: "please select a new date"
};
}
};
</script>