GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jiayingy → vue-single-date-picker

jiayingy / vue-single-date-picker

Licence: MIT License
A Vue project - single date picker

Programming Languages

Vue
7211 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Labels

vuedatedatepickerdate-picker

Projects that are alternatives of or similar to vue-single-date-picker

React Nice Dates
A responsive, touch-friendly, and modular date picker library for React.
Stars: ✭ 924 (+5675%)
Mutual labels:  date, datepicker, date-picker
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (+43.75%)
Mutual labels:  date, datepicker, date-picker
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (+1225%)
Mutual labels:  date, datepicker, date-picker
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+2581.25%)
Mutual labels:  date, datepicker, date-picker
Vuejs Datepicker
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
Stars: ✭ 2,529 (+15706.25%)
Mutual labels:  date, datepicker, date-picker
react-modern-datepicker
A modern date picker for react library
Stars: ✭ 19 (+18.75%)
Mutual labels:  date, datepicker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (+262.5%)
Mutual labels:  date, datepicker
angular-eonasdan-datetimepicker
A wrapper directive around the Eonasdan Datepicker v4 component.
Stars: ✭ 63 (+293.75%)
Mutual labels:  datepicker, date-picker
silverware-calendar
SilverWare Calendar Module
Stars: ✭ 15 (-6.25%)
Mutual labels:  date, datepicker
nativescript-datetimepicker
Plugin with date and time picking fields
Stars: ✭ 26 (+62.5%)
Mutual labels:  date, datepicker
flutter date picker timeline
Gregorian and Jalali customizable date picker as a horizontal timeline
Stars: ✭ 29 (+81.25%)
Mutual labels:  datepicker, date-picker
s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-18.75%)
Mutual labels:  datepicker, date-picker
monthyear-picker
Month and Year picker library for Android
Stars: ✭ 34 (+112.5%)
Mutual labels:  datepicker, date-picker
react-calendar
A no dependencies, lightweight and feature-rich ⚡ calendar component for react.
Stars: ✭ 68 (+325%)
Mutual labels:  datepicker, date-picker
nepali-date-picker
Nepali Date Picker jQuery Plugin 🇳🇵
Stars: ✭ 71 (+343.75%)
Mutual labels:  datepicker, date-picker
rn-date-range
date picker component for react native
Stars: ✭ 16 (+0%)
Mutual labels:  date, datepicker
chakra-dayzed-datepicker
Chakra UI + Dayzed = datepicker
Stars: ✭ 44 (+175%)
Mutual labels:  date, datepicker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器，支持无限循环滚动，不依赖第三方库
Stars: ✭ 26 (+62.5%)
Mutual labels:  date, datepicker
inquirer-datepicker-prompt
Datepicker prompt for inquirer.js
Stars: ✭ 24 (+50%)
Mutual labels:  date, datepicker
react-picky-date-time
A react component for date time picker. Online demo examples
Stars: ✭ 41 (+156.25%)
Mutual labels:  date, datepicker
View All Similar Projects ➔

Demo

https://jiayingy.github.io/vue-single-date-picker/

Installation

npm i vue-single-date-picker

How to use

Component

Import package

import SingleDatePicker from 'vue-single-date-picker';

export default {
  components: {
    SingleDatePicker
  }
}

Create component in your template

<SingleDatePicker />

Styles

  1. This library uses Google Material Icon pack. Refer to here on how to include it in your project.

  2. In your css/scss file,

@import '~vue-single-date-picker/dist/vue-single-date-picker.css';

Props

Props arguments remarks
date { year: <Number>, month: <Number>, date: <Number> } E.g. 1 Jan 2020
{year: 2020, month: 0, date: 1}
first-day-of-week firstDayOfWeek: <Number> (0: Sunday ... 6: Saturday)
E.g. start week on Monday
:first-day-of-week="1"

Events

events arguments remarks
@selectDate { year: <Number>, month: <Number>, date: <Number> } E.g. 1 Jan 2020
{year: 2020, month: 0, date: 1}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].