Notoriously Pedantic Magistrate

    v2-datepicker

    3.1.1 • Public • Published

    npm-version license

    中文 README

    v2-datepicker

    A simple datepicker component based Vue 2.x.

    Installation

    npm:

    npm i --save v2-datepicker
    

    or yarn

    yarn add  v2-datepicker
    

    Get Started

    import Vue from 'vue';
    import 'v2-datepicker/lib/index.css';   // v2 need to improt css
    import V2Datepicker from 'v2-datepicker';
    
    Vue.use(V2Datepicker)
    
    // basic
    <v2-datepicker v-model="val"></v2-datepicker>
    <v2-datepicker-range v-model="val2"></v2-datepicker-range>
    
    //setting
    <v2-datepicker-range v-model="val" lang="en" format="yyyy-MM-DD" :picker-options="pickerOptions"></v2-datepicker-range>
    <v2-datepicker v-model="val2" format="yyyy-MM-DD" :picker-options="pickerOptions2"></v2-datepicker>
    
    export default {
        data () {
            return {
                pickerOptions: {
                        shortcuts: [{
                            text: 'Latest Week',
                            onClick (picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: 'Latest Month',
                            onClick (picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: 'Latest Three Month',
                            onClick (picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                pickerOptions2: {
                    shortcuts: [{
                        text: 'Today',
                        onClick (picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: 'Yesterday',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: 'A week ago',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        }
    }
    

    More demo to visit here.

    On Demand Import

    This feature just apply to v2

    You need to install babel-plugin-on-demand-import:

    npm i babel-plugin-on-demand-import -D
    

    Then add it to your .babelrc:

    // v2
    {
        // ...
        "plugins": [
            ["on-demand-import" {
                "libraryName": "v2-datepicker"
            }]
        ]
    }
    
    // v3
    {
        // ...
        "plugins": [
            ["on-demand-import" {
                "libraryName": "v2-datepicker",
                "libraryName": "lib/components"
            }]
        ]
    }
    
    // Only import DatePicker component
    import { DatePicker } from 'v2-datepicker';
    Vue.use(DatePicker);
    
    <v2-datepicker v-model="val"></v2-datepicker>
    
    // Only import DatePickerRange component
    import { DatePickerRange } from 'v2-datepicker';
    Vue.use(DatePickerRange);
    
    <v2-datepicker-range v-model="val2"></v2-datepicker-range>
    

    Custom Locales

    The components native supports only two languages: cn(chinese) and en(english) since v3.1.0, if you want to custom locale, do it by customLocals prop:

    <template>
      <v2-datepicker format="MM/DD/YYYY" :lang="lang" :customLocals="locals" v-model="date"></v2-datepicker>
    </template>
     
    // js
    import locals from 'path/to/your/locals'
    export default {
      data () {
        return {
          lang: 'it',
          locales
        }
      }
    }
     
    // locales.js
    export default {
      'it': {
        'months': {
            'original': ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
            'abbr': ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
        },
        'days': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
      },
      'lang-key': {
         'months': {
            'original': ['value1', 'value2', '...'],
            'abbr': ['value1', 'value2', '...']
         },
         'days': ['value1', 'value2', '...']
      }
    }

    Available Props

    The v2-datepicker component

    Attribute Type Accepted Values Default Description
    value Date anything accepted by new Date() - default date of the date-picker
    lang String cn(chinese)/en(english) cn set local language of the date-picker
    customLocals Object - {} custom locale
    format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd format of the displayed value in the span box
    placeholder String - 选择日期/Choosing date... placeholder text
    disabled Boolean - false disabled date-picker
    picker-options Object - {} additional options, check the table below
    render-row Number 6/7 7 render rows of datepicker
    default-value Date anything accepted by new Date() - default date of the calendar

    The v2-daterange-picker component

    Attribute Type Accepted Values Default Description
    value Array anything accepted by new Date() - default date of the daterange-picker
    lang String cn(chinese)/en(english) cn set local language of the daterange-picker
    customLocals Object - {} custom locale
    format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd format of the displayed value in the span box
    placeholder String - 开始时间-结束时间/Choosing date range... placeholder text
    disabled Boolean - false disabled daterange-picker
    range-separator String - '-' range separator
    unlink-panels Boolean - false unlink two date-panels in range-picker
    picker-options Object - {} additional options, check the table below
    default-value Date anything accepted by new Date() - default date of the calendar

    Picker Options

    Attribute Type Accepted Values Default Description
    shortcuts Object[] - - a { text, onClick } object array to set shortcut options, check the table below
    disabledDate Function - - a function determining if a date is disabled with that date as its parameter. Should return a Boolean

    shortcuts

    Attribute Type Accepted Values Default Description
    text String - - title of the shortcut
    onClick Function - - callback function, triggers when the shortcut is clicked

    Event

    Event Name Description Parameters
    change triggers when the selected value changes component's binding value

    Development

    git clone git@github.com:dwqs/v2-datepicker.git
     
    cd v2-datepicker
     
    npm i
     
    npm start

    LICENSE

    MIT

    Install

    npm i v2-datepicker

    DownloadsWeekly Downloads

    650

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    240 kB

    Total Files

    11

    Last publish

    Collaborators

    • dwqs