vue2-datepicker-jquery

>> A JQuery Datepicker Component For Vue2

Usage no npm install needed!

<script type="module">
  import vue2DatepickerJquery from 'https://cdn.skypack.dev/vue2-datepicker-jquery';
</script>

README

vue2-datepicker-jquery

A JQuery Datepicker Component For Vue2

build:passed Badge npm MIT

Demo

https://kravtsovartem.github.io/vue2-datepicker-jquery/

Install

$ npm install vue2-datepicker-jquery jquery jquery-ui-dist --save

Usage

main.js

...
window.$ = window.JQuery = require("jquery")
require("jquery-ui-dist/jquery-ui.min.js")
// Or npm i jquery-ui And require('jquery-ui/ui/widgets/datepicker') (more small bundle)
require("jquery-ui-dist/jquery-ui.min.css")
...

App.vue

<template>
  <div id="app">
    <vue2-datepicker-jquery
      v-model="date"
      :locale="locale"
      :options="options"
    />
  </div>
</template>

<script>
  import Vue2DatepickerJquery from 'vue2-datepicker-jquery'

  export default {
    name: 'App',
    components: { Vue2DatepickerJquery },
    data() {
      return {
        options: {
          firstDay: 1,
          changeYear: true,
          changeMonth: true,
          dateFormat: 'yy.mm.dd',
        },
        locale: 'ru',
        date: new Date().toLocaleDateString(),
      }
    },
  }
</script>

..or CDN..

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0"
    />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/jqueryui"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/jqueryui/jquery-ui.css"
    />
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue2-datepicker-jquery"></script>
  </head>
  <body>
    <div id="app">
      <vue2-datepicker-jquery
        v-model="date"
        :locale="locale"
        :options="options"
      />
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          options: {
            firstDay: 1,
            changeYear: true,
            changeMonth: true,
            dateFormat: 'yy.mm.dd',
          },
          locale: 'ru',
          date: new Date().toLocaleDateString(),
        },
      })
    </script>
  </body>
</html>

Theme

Rewriting jquery-ui.css

Internationalization

<vue2-datepicker-jquery
  v-model="date"
  locale="en"
></vue2-datepicker-jquery>

Props

Prop Description Type Default
value '20.12.2020' String 'date'
locale localization: ru, en String 'en'
options https://api.jqueryui.com/datepicker/ String {}

Events

Name Description Callback Arguments
input When the value change(v-model event) date

Copyright (c) 2020-present kravtsovartem

FOSSA Status