Nahi Pata Mujhe!

    np-date-picker-vue-3

    0.10.2 • Public • Published

    nepali-datepicker-vuejs

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

    NOTE: This Component is heavily based on https://github.com/krijanniroula/v-nepalidatepicker

    Quick Start

    npm i np-date-picker-vue-3
    
    import { NepaliDatePicker } from 'np-date-picker-vue-3'
    
    export default {
      components: {
        NepaliDatePicker,
      },
      // rest of the component
    }
    
    ## Customizable Properties
    
    The following customizable properties can be added to the component
    
    1. classValue
    2. calenderType
    3. placeholder
    4. format
    5. yearSelect
    6. monthSelect
    
    ## Examples - classValue
    
    This works exactly as class properties. Eg: classValue="form-control" (boostrap class)
    (Note : In class="form-control", input will be rendered inside another input.)
    
    ```vue
    <template>
      <NepaliDatePicker 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>
      <NepaliDatePicker calenderType="Nepali"/>
    </template>
    

    Examples - placeholder

    <template>
      <NepaliDatePicker placeholder="YYYY-MM-DD"/>
    </template>
    

    Examples - format

    Format the date to provide various output based on format string

    'yyyy-mm-dd' => २०७५-०२-०१
    'YYY-MM-DD' => 075-02-01
    'mmmm d, yyyy ddd' => जेष्ठ १, २०७५ मंगल
    'MMM D, YYYY DDD' => Jes 1, 2075 Tue
    
    YYYY - 4 digit of year (2075)
    yyyy - 4 digit of year in nepali unicode (२०७५)
    YYY  - 3 digit of year (075)
    yyy  - 3 digit of year (०७५)
    YY   - 2 digit of year
    yy   - 2 digit of year in nepali unicode (७५)
    M    - month number (1 - 12)
    m    - month number (१ - १२) in nepali unicode
    MM   - month number with 0 padding (01 - 12)
    mm   - month number in nepali unicode with 0 padding - (०१-१२)
    MMM  - short month name (Bai, Jes, Asa, Shr, etc.)
    mmm  - short month name in nepali unicde (ब‍ै, जे, अ, श्रा, etc)
    MMMM - full month name (Baisakh, Jestha, Asar, ...)
    mmmm - full month name nepali (बैसाख, जेष्ठ, ...)
    D    - Day of Month (1, 2, ... 31, 32)
    d    - Day of Month in Nepali unicode (१, २, ३ ... ३१, ३२)
    DD   - Day of Month with zero padding (01, 02, ...)
    dd   - Day of Month with zero padding in Nepali unicode (०१, ०२, ...)
    DDD  - Day of Week short form (Sun, Mon, Tue, ...)
    ddd  - Day of week in short form nepali (आइत, सोम, ...)
    DDDD - Day of week full form (Sunday, Monday, Tuesday, ...)
    dddd - Day of week full form nepali (आइतबार, सोमबार, ...)
    
    <template>
      <NepaliDatePicker format="YYYY-MM-DD"/>
    </template>
    

    Examples - value

    Initial value for the datepicker.

    <script setup>
    import {ref} from 'vue'
    
    const birthDay = ref('2055-02-20')
    </script>
    
    <template>
      <NepaliDatePicker :modelValue="birthDay"/>
    </template>
    

    Examples - yearSelect

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

    <template>
      <NepaliDatePicker :yearSelect="false"/>
    </template>
    

    Examples - monthSelect

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

    <template>
      <NepaliDatePicker :monthSelect="false"/>
    </template>
    

    Examples - All in one

    <template>
      <NepaliDatePicker
          calenderType="Nepali"
          placeholder="YYYY-MM-DD"
          format="YYYY-MM-DD"
          value="2055-02-20"
          :yearSelect="false"
          :monthSelect="false"
      />
    </template>
    

    Examples - Custom Component

    <script setup>
    import {defineProps, ref} from 'vue'
    import {useDate} from "np-date-picker-vue-3";
    
    const props = defineProps({
      format: {type: String, default: "YYYY-MM-DD"},
      calenderType: {type: String, default: "English"},
      yearSelect: {type: Boolean, default: true},
      monthSelect: {type: Boolean, default: true},
      classValue: {type: String, default: ""},
      placeholder: {type: String, default: ""},
      modelValue: {type: String, default: ""},
    })
    
    const {days, date, visible, show} = useDate(props)
    
    const formData = ref('');
    
    function selectDay(dateData) {
      date.value = dateData;
      formData.value = date.value.format(props.format)
    }
    
    </script>
    
    <template>
      <input type="text" v-model="formData" @focus="show">
      <div>
        {{ formData }}
      </div>
      <div v-if="visible" class="flex flex-wrap" style="max-width: 400px; margin-top: 10px;">
        <div class="day-box" v-for="(date, i) in days" :key="i">
          <div class="cursor-pointer" @click="selectDay(date)">{{ date.day }}</div>
        </div>
      </div>
    </template>
    
    <style>
    .flex {
      display: flex;
    }
    
    .flex-wrap {
      flex-wrap: wrap;
    }
    
    .day-box {
      outline: 1px solid red;
      padding: 12px;
      width: 40px;
      background: #eee;
    }
    
    .cursor-pointer {
      cursor: pointer
    }
    </style>
    

    Install

    npm i np-date-picker-vue-3

    DownloadsWeekly Downloads

    9

    Version

    0.10.2

    License

    MIT

    Unpacked Size

    50.5 kB

    Total Files

    19

    Last publish

    Collaborators

    • iabhiyaan