Parthfaladu / vue-jquery-calendar

vue-jquery-calendar

vue-jquery-calendar is wrapper vue package of jquery ui datepicker

Installation

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,
  },
}

Note

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.

CSS

For vue-jquery-calendar appearance import jquery-ui css in App.vue main file

<style>
@import '~jquery-ui-dist/jquery-ui.css';
</style>

Example App

try out this Code Sandbox

Basic Usage

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>

Props

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

Events

Name	Description
change	get value on change date