Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Datepicker component using Vue.js

Posted on December 4, 2021December 4, 2021 By christo No Comments on Datepicker component using Vue.js

Here you can know how to implement datepicker component using Vue.js

datepicker component for Vue.js, already support Vue.js 2.x, the Vue.js 1.x version is on branch vue-1.x

Follow these steps to make Datepicker componebt using vue.js

Installation

npm install vue-date –save

Usage

use with single .vue file:

<template>
    <div>
        <datepicker v-model="date"></datepicker>
    </div>
</template>

<script>
    import datepicker from 'vue-date'
    export default {
        data() {
            return {
                date: '2016-10-16'
            }
        },
        components: { datepicker }
    }
</script>

use in browser:

//index.html
<html>
    <script src="path/to/vue.js"></script>
    <script src="path/to/index.js"></script>
    <body>
        <div id="app">
            <datepicker v-model="date"></datepicker>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    date: '2016-10-16'
                },
                components: { datepicker }
            })
        </script>
    </body>
</html>

Props

language

Type: String

Default: en

Optional: en(English), zh-cn(Chinese), uk(Ukrainsk), es(Spanish)

The language type. Support en(English), zh-cn(Chinese), uk(Ukrainsk) and es(Spanish) now

min

Type: String

Default: 1970-01-01

The minimum date.

/pass string
<datepicker v-model="start" min="2015-01-01"</datepicker>
//or pass variable
<datepicker v-model="start" :min="variable"></datepicker>

max

Type: String

Default: 3016-01-01

The maximum date. Usage is same of min.

range

Type: Boolean

Default: false

Use range mode or not. If pass true, the binding value should be an Array containg the range start and range end. eg. [‘1970-01-01’, ‘3016-01-01’]

Demo
Full project
vue.js Tags:Datepicker component using Vue.js, vue.js

Post navigation

Previous Post: Vue.js directive for a simple tooltip
Next Post: Vue.js component to make toast notification

Related Posts

Vue component that display loader during image loading vue.js
Vue scroll loader vue.js
An advanced and flexible Vue.js 2.x component for displaying data tables vue.js
Vue.js progress bar vue.js
responsive image with zoomed image on hover using vue.js vue.js
Vue web storage vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech