Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/linmasahiro/vue3-datepicker-lite

A simple datepicker component for vue3.0
https://github.com/linmasahiro/vue3-datepicker-lite

datepicker typescript vue vue3

Last synced: 2 days ago
JSON representation

A simple datepicker component for vue3.0

Awesome Lists containing this project

README

        

# vue3-datepicker-lite

[![Lincense](https://img.shields.io/github/license/linmasahiro/vue3-datepicker-lite)](https://github.com/linmasahiro/vue3-datepicker-lite/blob/master/LICENSE)
[![NPM](https://img.shields.io/npm/v/vue3-datepicker-lite)](https://www.npmjs.com/package/vue3-datepicker-lite)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/linmasahiro/vue3-datepicker-lite)](https://github.com/linmasahiro/vue3-datepicker-lite)
[![Website](https://img.shields.io/website?url=https%3A%2F%2Flinmasahiro.github.io%2Fvue3-datepicker-lite%2Fdist%2F)](https://linmasahiro.github.io/vue3-datepicker-lite/dist/)
[![npm](https://img.shields.io/npm/dm/vue3-datepicker-lite)](https://www.npmjs.com/package/vue3-datepicker-lite)

![GitHub Repo stars](https://img.shields.io/github/stars/linmasahiro/vue3-datepicker-lite?style=social)
![GitHub forks](https://img.shields.io/github/forks/linmasahiro/vue3-datepicker-lite?style=social)

![SampleGif](https://linmasahiro.github.io/vue3-datepicker-lite/sample.gif)

A simple datepicker component support Vue3.0!!

## DEMO

[Online Demo](https://linmasahiro.github.io/vue3-datepicker-lite/dist/)

## SampleCode

### import
import DatepickerLite from "vue3-datepicker-lite";
import DatepickerLite from "vue3-datepicker-lite/ts"; // TypeScript

### component

### sample data
const datepickerSetting = {
id: "birthday",
name: "birthday",
class: "myDateInput",
value: "2020/10/01",
placeholder: "Select",
isButtonType: false,
yearMinus: 0,
fromDate: "2020/02/10",
toDate: "2021/02/10",
disabledDate: [
"2020/10/02",
"2020/10/03",
"2020/10/04",
"2020/10/05",
"2020/10/06",
],
locale: {
format: "YYYY/MM/DD",
weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
startsWeeks: 0,
todayBtn: "Today",
clearBtn: "Clear",
closeBtn: "Close",
},
changeEvent: (value) => {
console.log(value + " selected!");
},
disableInput: false,
}

### release
ver 1.9.7 : fixed bugs. ref #21, #22
ver 1.9.6 : changed import file for TypeScript
ver 1.9.5 : fixed wrong path on index.js
ver 1.9.4 : fixed bugs. ref #20
ver 1.9.3 : removed `core-js` and added `index.d.ts` and no includes `compiler-core.esm-bundler.js`
ver 1.9.2 : fixed bugs
ver 1.9.1 : added auto-complate slash in the input field
ver 1.9.0 : added show-bottom-button option and years-range option
ver 1.8.9 : added months-option on locale-options
ver 1.8.8 : added switch to button-type option
ver 1.8.7 : added autocomplated off option
ver 1.8.6 : fixed datepicker on window bottom will be over window height bug
ver 1.8.5 : fixed locale attribute bug
ver 1.8.4 : supported start weeks option
ver 1.8.3 : fixed disabledDate not work bug
ver 1.8.2 : fixed valueAttr can not to be null bug
ver 1.8.1 : supported placeholder
ver 1.8.0 : supported value-attr responsive
ver 1.7.0 : supported disable input
ver 1.6.0 : supported date format