A vue datepicker component chose date and time

A vue datepicker component chose date and time

A vue datepicker component chose date and time.A vue datepicker, includes date, datetime, time `pkg.module supported`, which means that you can apply tree-shaking in you project

@livelybone/vue-datepicker

A vue datepicker, includes date, datetime, time

pkg.module supported, which means that you can apply tree-shaking in you project

repository

https://github.com/livelybone/vue-datepicker.git

Demo

https://livelybone.github.io/vue/vue-datepicker/

Installation

source-shell
npm i -S @livelybone/vue-datepicker

Register

source-js
// import all
import {Datepicker, Timepicker, DatetimePicker} from '@livelybone/vue-datepicker';
// or
import * as VueDatepicker from '@livelybone/vue-datepicker';

// Global register
Vue.component('datepicker', Datepicker);
Vue.component('timepicker', Timepicker);
Vue.component('datetime-picker', DatetimePicker);

// Local register
new Vue({
  components:{Datepicker, Timepicker, DatetimePicker}
})

Use in html, see what your can use in CDN: unpkg

text-html-basic
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-datepicker/lib/umd/<--module-->.js"></script>

Props

Common

Name Type DefaultValue Description
id [String, Number] none
value [String, Number] none
placeholder String none
min String none Min
max String none Max
canEdit Boolean true If it can be changed
inputStyle Object none Style of input tag
popperProps Object defaultPopperProps Props of module @livelybone/vue-popper
scrollbarProps Object { isMobile: false, maxHeight: 200 } Props of scrollbar, see vue-scrollbar-live
source-js
const defaultPopperProps = {
  arrowPosition: 'start',
  arrowOffsetScaling: 1,
  popperOptions: {
    placement: 'bottom-start',
    positionFixed: true,
    // more options in https://popper.js.org
  },
}

Datepicker

Name Type DefaultValue Description
dayStr Array ['日', '一', '二', '三', '四', '五', '六'] Used to set day name

Timepicker

Name Type DefaultValue Description
timeStr Array ['时', '分', '秒'] Used to set time name
btnStr String 确定 Used to set text of button

DatetimePicker

Name Type DefaultValue Description
dayStr Array ['日', '一', '二', '三', '四', '五', '六'] Used to set day name
timeStr Array ['时', '分', '秒'] Used to set time name
btnStr String 确定 Used to set text of button

Events

Name EmittedData Description
input String

style

For building style, you can use the css or scss file in lib directory.

source-js
// scss
import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss'

// css
import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css'

Or

source-css-scss
// scss
@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss';

// css
@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css';

Or, you can build your custom style by copying and editing index.scss

Github

livelybone/vue-datepicker

vuejs vue-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate