Security News
Research
Supply Chain Attack on Rspack npm Packages Injects Cryptojacking Malware
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
vuejs3-datepicker
Advanced tools
A datepicker Vue component. Compatible with Vue 3 Only
To view demo examples locally clone the repo and run npm install && npm run dev
To view a demo online: https://vuejs3-datepicker.netlify.app/
npm install vuejs3-datepicker --save
yarn add vuejs3-datepicker
import Datepicker from 'vuejs3-datepicker';
export default {
// ...
components: {
Datepicker
}
// ...
}
<datepicker></datepicker>
value prop if passed should be a Date object
<script>
var state = {
date: new Date(2016, 9, 16)
}
</script>
<datepicker :value="state.date"></datepicker>
support name attribute for normal html form submission
<datepicker :value="state.date" name="uniquename"></datepicker>
Using v-model
<datepicker v-model="state.date" name="uniquename"></datepicker>
Emits events
<datepicker @selected="parentfunctionSelectedhandler" @opened="datepickerOpenedFunction" @closed="parentfunctionCloseHandler">
Inline always open version
<datepicker :inline="true"></datepicker>
Programtic Acess of value of datepicker
<datepicker ref="inputRef" @selected="handleSelectDate" :disabled-dates="disabledDates" :highlighted="highlightDates" :value="date" @closed="handleCalendarClose" ></datepicker>
const { selectedDate } = (inputRef.value as any).value;
icon color, icon height, icon width of calendar
<datepicker :icon-color="color" :icon-width="width" :icon-height="height" ></datepicker>
Prop | Type | Default | Description |
---|---|---|---|
modelValue | Date|String | Date value of the datepicker via v-model | |
value | Date|String | Date value of the datepicker | |
format | String|Function | dd MMM yyyy | Date formatting string or function |
full-month-name | Boolean | false | To show the full month name |
disabled-dates | Object | See below for configuration | |
placeholder | String | Input placeholder text | |
inline | Boolean | To show the datepicker always open | |
calendar-class | String|Object | CSS class applied to the calendar el | |
input-class | String|Object | CSS class applied to the input el | |
wrapper-class | String|Object | CSS class applied to the outer div | |
monday-first | Boolean | false | To start the week on Monday |
clear-button | Boolean | false | Show an icon for clearing the date |
clear-button-icon | String | Use icon for button (ex: fa fa-times) | |
calendar-button | Boolean | false | Show an icon that that can be clicked |
calendar-button-icon | String | Use icon for button (ex: fa fa-calendar) | |
calendar-button-icon-content | String | Use for material-icons (ex: event) | |
day-cell-content | Function | Use to render custom content in day cell | |
initial-view | String | minimumView | If set, open on that view |
disabled | Boolean | false | If true, disable Datepicker on screen |
typeable | Boolean | false | If true, allow the user to type the date |
use-utc | Boolean | false | use UTC for time calculations |
open-date | Date|String | If set, open on that date | |
minimum-view | String | 'day' | If set, lower-level views won't show |
maximum-view | String | 'year' | If set, higher-level views won't show |
preventDisableDateSelection | Boolean | true | will prevent selection of disabled date |
iconColor | String | black | will change calendar icon color |
iconWidth | String | Number | 16 |
iconHeight | String | Number | 16 |
These events are emitted on actions in the datepicker
Event | Output | Description |
---|---|---|
opened | The picker is opened | |
closed | The picker is closed | |
selected | Date|null | A date has been selected |
input | Date|null | Input value has been modified |
cleared | Selected date has been cleared | |
changed-month | Object | Month page has been changed |
changed-year | Object | Year page has been changed |
changed-decade | Object | Decade page has been changed |
Dates can be disabled in a number of ways.
<script>
var state = {
disabledDates: {
to: new Date(2016, 0, 5), // Disable all dates up to specific date
from: new Date(2016, 0, 26), // Disable all dates after specific date
dates: [ // Disable an array of dates
new Date(2016, 9, 16),
new Date(2016, 9, 17),
new Date(2016, 9, 18)
],
preventDisableDateSelection: true
}
}
</script>
<datepicker :disabled-dates="state.disabledDates" :prevent-disable-date-selection="preventDisableDateSelection"></datepicker>
<script>
var state = {
highlighted: {
to: new Date(2016, 0, 5), // Highlight all dates up to specific date
from: new Date(2016, 0, 26), // Highlight all dates after specific date
dates: [ // Highlight an array of dates
new Date(2016, 9, 16),
new Date(2016, 9, 17),
new Date(2016, 9, 18)
]
},
includeDisabled: true // Highlight disabled dates
}
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>
Contributors:
FAQs
Vue 3 datepicker
The npm package vuejs3-datepicker receives a total of 3,621 weekly downloads. As such, vuejs3-datepicker popularity was classified as popular.
We found that vuejs3-datepicker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.