vue-nepali-datepicker v0.1.0

nepali-datepicker-vuejs

An easy-to-use and customizable nepali date picker component powered by Vue js

Demo:

Install

npm install vue-nepali-datepicker

Quick Start

import VueNepaliDatepicker from "v-nepalidatepicker";

export default {
  components: { VueNepaliDatepicker },
};

Examples

<template>
  <vue-nepali-datepicker />
</template>

Customizable Properties

The following customizable properties can be added to the component

1. classValue
2. calenderType
3. placeholder
4. format
5. value
6. yearSelect
7. monthSelect

Examples - classValue

This works exactly as class properties. Eg: classValue="form-control"

<template>
  <vue-nepali-datepicker classValue="datepicker" />
</template>
<style>
.datepicker {
  width: 50px;
  height: 20px;
}
</style>

Examples - calenderType

Date picker is present in nepali language and English nepali language. Default type will be English nepali.

For nepali language :

<template>
  <vue-nepali-datepicker calenderType="Nepali" />
</template>

Examples - placeholder

<template>
  <vue-nepali-datepicker placeholder="YYYY-MM-DD" />
</template>

Examples - format

It uses format type as per following documentation:

<template>
  <vue-nepali-datepicker format="YYYY-MM-DD" />
</template>

Examples - value

Initial value for the datepicker.

<template>
  <vue-nepali-datepicker value="2053-09-19" />
</template>

Examples - yearSelect

The dropdown year select can be turned off using boolean type to yearSelect

<template>
  <vue-nepali-datepicker :yearSelect="false" />
</template>

Examples - monthSelect

The dropdown month select can be turned off using boolean type to monthSelect

<template>
  <vue-nepali-datepicker :monthSelect="false" />
</template>

Examples - All in one

<template>
  <vue-nepali-datepicker
    calenderType="Nepali"
    placeholder="YYYY-MM-DD"
    format="YYYY-MM-DD"
    value="2053-09-19"
    :yearSelect="false"
    :monthSelect="false"
  />
</template>