vue-jquery-calendar is wrapper vue package of jquery ui datepicker
npm install --save vue-jquery-calendar Or using yarn
yarn add vue-jquery-calendar -dev For Installing plugin import vue-jquery-calendar in your component page.
//foo.vue import VueJqueryCalendar from 'vue-jquery-calendar'; export default { components: { VueJqueryCalendar, }, }Please note that this package depends on jQuery and jquery-ui, but you won't need to add it to your project manually, vue-jquery-calendar will handle this for you automatically if this dependencies are not detected.
For vue-jquery-calendar appearance import jquery-ui css in App.vue main file
<style> @import '~jquery-ui-dist/jquery-ui.css'; </style>try out this Code Sandbox
You can pass an array of fullclendar objects through the props
<VueJqueryCalendar v-model="date" :class-name="'form-control'" date-format="dd-mm-yy" :readonly="true" /> ... <script> import moment from 'moment'; import VueJqueryCalendar from 'vue-jquery-calendar'; ... components: { VueJqueryCalendar, }, data() { return { date: moment().subtract(30, "days").format("DD-MM-YYYY"), } } ... </script>| Name | Type | Default | Description |
|---|---|---|---|
| value | String | null | Value of the input DOM |
| showButtonPanel | Boolean | false | To display a button pane underneath the calendar |
| changeMonth | Boolean | false | The month should be rendered as a dropdown instead of text |
| changeYear | Boolean | false | The year should be rendered as a dropdown instead of text |
| numberOfMonths | Number | 1 | The number of months to display in a single row |
| dateFormat | String | 'dd/mm/yy' | The format for parsed and displayed dates |
| readonly | Boolean | false | Calendar input field set as read-only mode |
| className | String | null | Calendar input class name set |
| Name | Description |
|---|---|
| change | get value on change date |