1.1.5 • Published 4 years ago
vue2-datepicker-jquery v1.1.5
vue2-datepicker-jquery
A JQuery Datepicker Component For Vue2
Demo
https://kravtsovartem.github.io/vue2-datepicker-jquery/
Install
$ npm install vue2-datepicker-jquery jquery jquery-ui-dist --saveUsage
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
