hiyali / Vue Smooth Picker
Licence: mit
🏄🏼 A SmoothPicker for Vue 2 (like native datetime picker of iOS)
Stars: ✭ 188
Projects that are alternatives of or similar to Vue Smooth Picker
Horizontalpicker
DatePicker horizontal con selección smooth por día para Android.
Stars: ✭ 116 (-38.3%)
Mutual labels: datetime, picker, smooth
imrc-datetime-picker
(Improved) React component datetime picker by momentjs 📆
Stars: ✭ 21 (-88.83%)
Mutual labels: datetime, picker
jquery-datepicker
A full-featured datepicker jquery plugin
Stars: ✭ 35 (-81.38%)
Mutual labels: datetime, picker
vue-timeselector
🕒 Simply customizable powerful time picker for Vue.js
Stars: ✭ 41 (-78.19%)
Mutual labels: datetime, picker
ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
Stars: ✭ 24 (-87.23%)
Mutual labels: datetime, picker
Vue Ydui
A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
Stars: ✭ 2,798 (+1388.3%)
Mutual labels: datetime, vue2
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (-69.15%)
Mutual labels: datetime, picker
Tempus Dominus
A powerful Date/time picker widget.
Stars: ✭ 6,900 (+3570.21%)
Mutual labels: datetime, picker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (-61.17%)
Mutual labels: datetime, picker
Rc Datetime Picker
React component for datetime picker by Moment.js
Stars: ✭ 85 (-54.79%)
Mutual labels: datetime, picker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+185.11%)
Mutual labels: datetime, picker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+585.64%)
Mutual labels: datetime, picker
Date Picker
📅 Custom responsive date picker widget for Android, written in Kotlin.
Stars: ✭ 146 (-22.34%)
Mutual labels: datetime, picker
React Mobile Picker
An iOS like select box component for React
Stars: ✭ 180 (-4.26%)
Mutual labels: picker
Simplenumberpicker
A customisable decimal and hexadecimal material picker view for Android.
Stars: ✭ 185 (-1.6%)
Mutual labels: picker
Node Geo Tz
A node.js module to find the timezone based on gps coordinates
Stars: ✭ 181 (-3.72%)
Mutual labels: datetime
Volbx
Graphical tool for data manipulation written in C++/Qt
Stars: ✭ 187 (-0.53%)
Mutual labels: data
Vue Gates
🔒 A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
Stars: ✭ 184 (-2.13%)
Mutual labels: vue2
vue-smooth-picker 
🏄🏼 A SmoothPicker for Vue 2
Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...
Take a look
Demo links: Product | Datetime | Gender
Demo code links: Product | Datetime | Gender
Install
npm i -S vue-smooth-picker
Usage
Quick look
// import and use
import 'vue-smooth-picker/dist/css/style.css'
import SmoothPicker from 'vue-smooth-picker'
Vue.use(SmoothPicker)
...
// in your template
<smooth-picker ref="smoothPicker" :data="data" :change="change" />
Or see: example files
props
| name | type | default | explain |
|---|---|---|---|
change |
Function |
(gIndex, iIndex) => {} | Callback after data current index changed, pass two arguments, group index gIndex and item index iIndex
|
data |
Array |
[] | SmoothPicker initial data |
data[i].currentIndex |
Number |
0 | Current index of this group's list |
data[i].flex |
Number |
1 | Group weights in parent width 1..12
|
data[i].list |
Array |
- | List of the group |
data[i].list[j] |
String or Object
|
- | Item in the list of group, use value key when it is a object item |
data[i].onClick |
Function |
- | Click event on the middle layer of this group, pass two arguments, this group index gIndex and selected index iIndex of this group |
data[i].textAlign |
String |
- |
left center or right in item block |
data[i].className |
String |
- | Your custom class name for this group |
data[i].divider |
Boolean |
false | If it is true, then onClick list currentIndex will be not used |
data[i].text |
String |
- | Just used when divider is true |
Instance methods
| name | type | explain |
|---|---|---|
setGroupData |
Function => void |
Dynamically set a group data with two arguments (gIndex, gData), group index and group data (see props data[i]) |
getCurrentIndexList |
Function => [] |
Return a Array of the groups current index list (has divider current index, and it is default to 0) |
getGroupsRectList |
Function => void |
Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |
Development
npm run dev # development
npm run build # build
Examples
See branch gh-pages.
Any problem?
Please let me know.
Donate
License
MIT
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].