npmpackage.info

Gathering detailed insights and metrics for vue3-datepicker

Other packages similar to vue3-datepicker

vue3-better-pick

1.0.10

Vue3 Datepicker component (tailwindcss)

react-datepicker

7.5.0

A simple and reusable datepicker component for React

vue3-datepicker-lite

1.9.7

A simple datepicker component for vue3.0

vue-datepicker-next

1.0.3

A Datepicker Component For Vue3

Gathering detailed insights and metrics for vue3-datepicker

vue3-datepicker

Simple datepicker component for Vue 3

0.4.0

150

MIT

Vue

34.95 kB

2,473,026 3.2

Installations

npm install vue3-datepicker

Pull Requests

Open

1

Total

37

Closed

10

Merged

26

Issues

Open

22

Total

89

Closed

67

Releases

v0.4.0 - Fixed style injection

v0.4.0

Published on 10 Jun 2023

v0.3.8 - `typeable` fix

v0.3.8

Published on 04 Jun 2023

v0.3.7 - Enhancements & events

v0.3.7

Published on 04 Jun 2023

v0.3.6 - Bundling fixes

v0.3.6

Published on 04 Jun 2023

v0.3.5 - Bug fixes & features

v0.3.5

Published on 10 Oct 2022

0.3.4 - Bug fixes

v0.3.4

Published on 13 May 2022

View all 17 releases

Developer

icehaunter

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=10.16.0

Typescript Support

Yes

Node Version

18.16.0

NPM Version

9.5.1 Statistics

150 Stars

127 Commits

154 Forks

9 Watching

3 Branches

17 Contributors

Updated on 19 Sept 2024

Bundle Size

219.05 kB

Minified

34.95 kB

Minified + Gzipped

Bundlephobia

Languages

Vue (95.32%)

TypeScript (3.13%)

HTML (0.79%)

CSS (0.48%)

JavaScript (0.29%)

Total Downloads

Cumulative downloads

Total Downloads

2,473,026

Last day

-3.5%

4,871

Compared to previous day

Last week

10.2%

26,531

Compared to previous week

Last month

20.8%

104,899

Compared to previous month

Last year

47.8%

1,048,998

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vue 3 Datepicker

Documentation: https://icehaunter.github.io/vue3-datepicker/

This is a basic (at least for now) reimplementation of https://github.com/icehaunter/vuejs-datepicker in Vue 3 and with greatly cleaned up code.

All date manipulation and formatting are done via the amazing date-fns library, so it's a direct dependency of this picker.

Installation

Package is available on NPM: https://www.npmjs.com/package/vue3-datepicker

1npm i vue3-datepicker

The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.

Usage

For more examples see https://icehaunter.github.io/vue3-datepicker/examples.html

1<template>
2  <datepicker
3    v-model="selected"
4    :locale="locale"
5    :upperLimit="to"
6    :lowerLimit="from"
7    :clearable="true"
8  />
9</template>

Props and attributes

Attribute fallthrough is enabled, so any attribute you apply to the component will be passed down to the input.

All props which accept formatting strings for dates use date-fns formatting function under the hood, so see that function's documentation for patterns.

Main interaction to date selection is done via v-model with Date as expected type of the value passed.

Full props documentation is available at https://icehaunter.github.io/vue3-datepicker/config.html#props

ID	Type	Default	Description
`upperLimit`	`Date`		Upper limit for available dates for picking
`lowerLimit`	`Date`		Lower limit for available dates for picking
`startingViewDate`	`Date`	`() => new Date()`	Date on which to focus when empty datepicker is opened. Default is "right now"
`disabledDates`	`{ dates: Date[] }`		Dates not available for picking
`disabledTime`	`{ dates: Date[] }`		Dates not available for time picking
`startingView`	`'time' \| 'day' \| 'month' \| 'year'`	`'day'`	View on which the date picker should open. Can be either `year`, `month`, or `day`
`minimumView`	`'time' \| 'day' \| 'month' \| 'year'`	`'day'`	If set, lower-level views won't show
`dayPickerHeadingFormat`	`String`	`LLLL yyyy`	`date-fns`-type formatting for a day view heading
`dayFormat`	`String`	`dd`	`date-fns`-type formatting for each day on the day view
`weekdayFormat`	`String`	`EE`	`date-fns`-type formatting for a line of weekdays on day view
`inputFormat`	`String`	`yyyy-MM-dd`	`date-fns`-type format in which the string in the input should be both parsed and displayed
`locale`	`Locale`	`date-fns/locale/en`	`date-fns` locale object. Used in string formatting (see default `dayPickerHeadingFormat`)
`disabled`	`Boolean`	`false`	Disables datepicker and prevents it's opening
`typeable`	`Boolean`	`false`	Allows user to input date manually
`weekStartsOn`	`Number`	1	Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default
`clearable`	`Boolean`	`false`	Allows clearing the selected date and setting the value to `null`
`allowOutsideInterval`	`Boolean`	`false`	Allows user to click dates outside of current interval

Events

opened: Emitted every time the popup opens, including on field focus
closed: Emitted every time the popup closes, including on field blur
decadePageChanged: Emitted when a page is changed on the year picker view, displaying a different decade. Has a date that is included in the shown decade as an argument.
yearPageChanged: Emitted when a page is changed on the month picker view, displaying a different year. Has a date that is included in the shown year as an argument.
monthPageChanged: Emitted when a page is changed on the day picker view, displaying a different month. Has a date that is included in the shown month as an argument.

Compatibility

Package is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.

Example

1<template>
2  <datepicker v-model="picked" />
3</template>
4
5<script>
6import Datepicker from '../src/datepicker/Datepicker.vue'
7components: {
8  Datepicker
9},
10data(): {
11  return {
12    picked: new Date();
13  }
14}
15</script>

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

3.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue3-datepicker

Other packages similar to vue3-datepicker

vue3-datepicker

Installations

Pull Requests

1

37

10

26

Issues

22

89

67

Releases

Developer

Developer Guide

CommonJS

>=10.16.0

Yes

18.16.0

9.5.1

Statistics

Bundle Size

219.05 kB

34.95 kB

Languages

Total Downloads

2,473,026

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vue 3 Datepicker

Installation

Usage

Props and attributes

Events

Compatibility

Example

10

10

10

3

1

1

0

0

0

0

0

0

3.2

/10