weifeiyue / Vue Datepicker Local
Licence: mit
A Beautiful Datepicker Component For Vue2
Stars: ✭ 282
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Datepicker Local
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-87.94%)
Mutual labels: component, datepicker
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+1257.45%)
Mutual labels: component, datepicker
Angular Datepicker
Highly configurable date picker built for Angular applications
Stars: ✭ 386 (+36.88%)
Mutual labels: component, datepicker
React Dates
React date(range) inputs/pickers
Stars: ✭ 43 (-84.75%)
Mutual labels: component, datepicker
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (-31.91%)
Mutual labels: component, datepicker
Things Calendar
Simple but elegant datepicker for the web — inspired by Things for mac
Stars: ✭ 165 (-41.49%)
Mutual labels: component, datepicker
Vue Datepicker Ui
Datepicker Component For Vue
Stars: ✭ 252 (-10.64%)
Mutual labels: component, datepicker
Antue
🌟 A set of enterprise-class Vue UI components, following the Ant Design specification.
Stars: ✭ 254 (-9.93%)
Mutual labels: component
Uieffect
UIEffect is an effect component for uGUI element in Unity. Let's decorate your UI with effects!
Stars: ✭ 3,449 (+1123.05%)
Mutual labels: component
vue-single-date-picker
A Vue project - single date picker
Stars: ✭ 16 (-94.33%)
Mutual labels: datepicker
Circuits
circuits is a Lightweight Event driven and Asynchronous Application Framework for the Python Programming Language with a strong Component Architecture.
Stars: ✭ 256 (-9.22%)
Mutual labels: component
Paper Switch
🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Stars: ✭ 2,902 (+929.08%)
Mutual labels: component
Calendar
A calendar picker component, based on jQuery.
Stars: ✭ 49 (-82.62%)
Mutual labels: datepicker
D2pdatepicker
Elegant and Easy-to-Use iOS Swift Date Picker
Stars: ✭ 280 (-0.71%)
Mutual labels: datepicker
Svelte Calendar
A lightweight datepicker with neat animations and a unique UX.
Stars: ✭ 279 (-1.06%)
Mutual labels: datepicker
React Click Outside
Higher Order Component that provides click outside functionality
Stars: ✭ 266 (-5.67%)
Mutual labels: component
vue-datepicker-local
A Beautiful Datepicker Component For Vue2
- Lightweight (less than 5kb minified and gzipped)
- Only dependencies Vue
- Beautiful!
Demo
https://weifeiyue.github.io/vue-datepicker-local/
Usage
Install
$ npm install vue-datepicker-local
ES6
<template>
<vue-datepicker-local v-model="time" />
</template>
<script>
import VueDatepickerLocal from 'vue-datepicker-local'
export default {
components: {
VueDatepickerLocal
},
data () {
return {
time: new Date()
}
}
}
</script>
Browser globals
The dist folder contains vue-datepicker-local.js and vue-datepicker-local.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/vue-datepicker-local.css">
</head>
<body>
<div id="app">
<vue-datepicker-local v-model="time"></vue-datepicker-local>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-datepicker-local.js"></script>
<script>
new Vue({
el: "#app",
data: {
time: new Date()
}
})
</script>
</body>
</html>
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| v-model | dates to be manipulated | Date/Array | -- |
| name | name for input | String | -- |
| type | type for input (inline/normal) | String | normal |
| inputClass | custom class name for input | String | -- |
| popupClass | custom class name for popup | String | -- |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| clearable | clear the date | Boolean | false |
| rangeSeparator | range separator | String | "~" |
| format | to set the date format | String | "YYYY-MM-DD" |
| local | the local of the DatePicker | Object | { dow: 1, // Monday is the first day of the week hourTip: '选择小时', // tip of select hour minuteTip: '选择分钟', // tip of select minute secondTip: '选择秒数', // tip of select second yearSuffix: '年', // format of head monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // months of head months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(''), // months of panel weeks: '一_二_三_四_五_六_日'.split('_'), // weeks cancelTip: '取消', // default text for cancel button , submitTip: '提交' // default text for submit button } |
| disabledDate | specify the date that cannot be selected | Function | (time, format)=>{return false} |
| showButtons | show Cancel/Submit buttons | Boolean | false |
| placeholder | placeholder of Input | String | -- |
Events
| Event Name | Description | Parameters |
|---|---|---|
| confirm | triggers when user confirms | the value component's binding value |
| cancel | triggers when user click the cancel button | -- |
| clear | triggers when user click the clear button | -- |
License
vue-datepicker-local is licensed under The MIT License.
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].