Naysayers Promote Misery

    vue-jalaali-datepicker

    1.0.1 • Public • Published

    vue-jalaali-datepicker

    Jalaali calendar and datepicker for vue.js 2

    Demo

    Screenshot

    Requirements

    Installation

    npm

    $ npm install vue-jalaali-datepicker

    Usage

    <script>
    // for Vue 2.0
    import myDatepicker from 'vue-jalaali-datepicker'
    import myDatepicker from 'vue-jalaali-datepicker/vue-jalaali-datepicker-es6' // for ES6
     
    export default {
      data () {
        return {
          myDate: new Date(), // for v-model
          startTime: {
            time: '' // '1396-05-02' (type=day) && '["1396/05/02", "1396/06/02", "1396/07/02"]' (type="multi-day")
          },
     
          option: {
            type: 'day',
            week: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'],
            month: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
            format: 'jYYYY-jMM-jDD',
            placeholder: 'انتخاب کنید',
            inputStyle: {
              'display': 'inline-block',
              'padding': '6px',
              'line-height': '22px',
              'font-size': '16px',
              'border': '2px solid #fff',
              'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
              'border-radius': '2px',
              'color': '#5F5F5F'
            },
            color: {
              header: '#ccc',
              headerText: '#f00'
            },
            buttons: {
              ok: 'انتخاب',
              cancel: 'انصراف'
            },
            overlayOpacity: 0.5, // 0.5 as default
            dismissible: true // as true as default
          },
          timeoption: {
            type: 'min',
            week: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'],
            month: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
            format: 'jYYYY-jMM-jDD HH:mm'
          },
          limit: [{
            type: 'weekday',
            available: [1, 2, 3, 4, 5]
          }]
        }
      },
      components: {
        'date-picker': myDatepicker
      }
    }
    </script> 
    <template>
      <div class="card">
     
        <!-- for Vue 2.0 -->
        <div class="row">
          <span>Departure Date:</span>
          <date-picker v-model="myDate" :date="startTime" :option="option" :limit="limit"></date-picker>
        </div>
     
      </div>
    </template>

    API

    • Option
    • type
      type: 'day' // 'min', 'multi-day'
    
    
    • format
    format: 'jYYYY-jMM-jDD HH:mm'
    
    • placeholder
    placeholder: 'انتخاب کنید'
    
    • week
     week: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه']
    
    • month
      month: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']
    
    • wrapperClass
    wrapperClass: ''
    
    • inputClass
    inputClass: ''
    
    • inputStyle
    inputStyle: {
      'display': 'inline-block',
      'padding': '6px',
      'line-height': '22px',
      'font-size': '16px',
      'border': '2px solid #fff',
      'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
      'border-radius': '2px',
      'color': '#5F5F5F'
    }
    
    • color
      color: {
        header: '#ccc',
        headerText: '#f00'
      }
    
    • buttons
    buttons: {
      ok: 'انتخاب',
      cancel: 'انصراف'
    }
    
    • animate
      overlayOpacity: 0.5, // 0.5 as default
      dismissible: true // as true as default
    
    • limit
    • weekdays
     
    limit:{
      type: 'weekday',
      available: [1, 2, 3, 4, 5]
    }
     

    prop

    • Vue 2.0
    date: {
      time: '' // string
    }
    • v-model should be Date and overwrite on date: { time: '' }
     
    <date-picker v-model="myDate" :date="date" :limit="limit"></date-picker>
     

    License

    The MIT License

    Install

    npm i vue-jalaali-datepicker

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • k45