@wujiaxian/datepicker

v1.0.7

Published

4 years ago

A C-End Date Selector Component Based on Vue Development

0High
0Medium
0Low

wujiaxian

vue-datepicler datepicker w-datepicker Wdatepicker @wujiaxian/datepicker

Wdatepicker

A C-End Date Selector Component Based on Vue Development.

Demo

To view a demo online: https://codesandbox.io/embed/staging-darkness-k7ymp

To view demo examples locally clone the repo and run npm install && npm run dev

Install

npm install @wujiaxian/datepicker --save

import Vue from 'vue'
import Wdatepicker from '@wujiaxian/datepicker'
import "@wujiaxian/datepicker/dist/Wdatepicker.css"

Vue.use(Wdatepicker)

Or use directly from a CDN

<head>
  <link href="https://unpkg.com/@wujiaxian/datepicker/dist/Wdatepicker.css"/>
</head>
<div id="app">
  <w-datepicker></w-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker"></script>
<script>
  const app = new Vue({
    el: '#app'
  })
</script>

Usage

<w-datepicker></w-datepicker>

value prop if passed should be a Date object or String Date Formatting or Number time stamp

<script>
export default {
  data () {
    return {
      date: new Date('2019-09-30')
    }
  }
}
</script>
<w-datepicker :value="date"></w-datepicker>

Using v-model

<w-datepicker v-model="date"></w-datepicker>

Using 'v-model and defaultValue'

<script>
export default {
  data () {
    return {
      date: ''
    }
  }
}
</script>
<w-datepicker v-model="date" defaultValue="2019-09-30"></w-datepicker>

Emits events

<script>
export default {
  data () {
    return {
      date: ''
    }
  },
  methods: {
    change (value) {

    },
    focus (componentInstance) {

    },
    blur (componentInstance) {

    },
    // Click is not the date of that month, switch to that month or select the date of that month or do nothing. Operations are prohibited at times other than maximum and minimum.
    disabledDate ({ year, month, date, disabledDate, thisMonth }) {

    }
  }
}
</script>
<w-datepicker v-model="date" @changge="change" @focus="focus" @blur="blur" @disabledDate="disabledDate"></w-datepicker>

Date Formatting

String Formatting

| Token | Desc | Example | |-------|------------------------|-------------| | YYYY | year | 2019 | | MM | month | 01 | | DD | date | 30 | | hh | hour | 12 | | mm | minute | 30 | | ss | second | 30 |

Number time stamp

1569572985 // second

1569572985000 // Millisecond

Date Object

new Date('2019/09/30')

Available props

| Prop | Type | Default | Description | |-------------------------------|-------------------------|-------------------------|------------------------------------------| | value / v-model | Date|String|Number | | Date value of the datepicker | | defaultValue | Date|String|Number | | Date selector default date value | | editable | Boolean | false | Whether the input box can be entered | | formatDate | String | YYYY-MM-DD | The format displayed in the input box | | minDate | Date|String|Number | Ten years ago | Minimum time | | maxDate | Date|String|Number | Ten Years From Now | Maximum time | | clickDisabledDate | String | | Click on the non-current month date, select the month date when the value is empty, switch to that month when the value is switch, and the other values do not operate.| | placeholder | String | Selection date | Input box prompt information | | selectState | String | circle | Time Selected State, Value: Square or Round or Empty| | clearBtn | Boolean | true | Whether the Clear button is displayed or not| | disabled | Boolean | false | Prohibition of use | | disabledDate | Array|Function | [] | Disabled date | | closeIconClass | String | | Close the button class, you can set icon class to replace the current one| String | | Time icon class, you can set icon class to replace the current

Events

| Event | Output | Description | |-------------------------------|---------------------------|------------------------------------------| | change | String | Triggered after the time has been changed to receive the changed value| | focus | Object | Input box gets focus trigger and receives component instance | | blur | Object | Input box lost focus trigger, receive component instance | | disabledDate | Object | To receive the current date information, click on a callback from a non-current month date or a banned date |

Slots

| Name | params | Description | |-------------------------------|---------------------------|------------------------------------------| | header | component instance, {self}| Date Selection Box Header Insert Content |
| footer | component instance, {self}| Insert content at the bottom of the date selection box | | date-icon | | Custom Date Icon | | close-icon | | Custom Close Icon |

Use of slots

<script>
export default {
  data () {
    return {
      date: ''
    }
  },
  methods: {
    headClickHandler (componentInstance) {

    },
    switchingDate (componentInstance, type) {
      let now = new Date()
      let cnow = new Date(this.date)
      switch (type) {
        case 'front':
          cnow.setDate(cnow.getDate() - 10)
          break
        case 'after':
          cnow.setDate(cnow.getDate() + 10)
          break
      }
      const t = type === 'now' ? now : cnow
      componentInstance.selectDate(t)
    }
  }
}
</script>

<w-datepicker v-model="date">
  <template v-slot:header="{self}">
    <div @click="headClickHandler(self)">This is a head content.</div>
  </template>

  <template v-slot:footer="{self}">
    <button @click="switchingDate(self, 'front')">The first 10 days</button>
    <button @click="switchingDate(self, 'now')">Today<button>
    <button @click="switchingDate(self, 'after')">The next 10 days</button>
  </template>
</w-datepicker>

Disabled Dates

Dates can be disabled in a number of ways.

Array mode

<script>
export default {
  data () {
    return {
      disableDate: ['2019-09-18', '2019-09-08']
    }
  }
}
</script>

<w-datepicker v-model="date" :disabledDate="disableDate"></w-datepicker>

Function mode

<script>
export default {
  data () {
    return {
      date: ''
    }
  },
  methods: {
    disableDate (currentDate, monthDate, nowDate) {
      let date = new Date('2019/09/10')
      return date.getFullYear() === monthDate.getFullYear() && date.getMonth() === monthDate.getMonth() && date.getDate() === monthDate.getDate()
    }
  }
}
</script>

<w-datepicker :disabledDate="disableDate"></w-datepicker>

Internationalization

The default use of Chinese in components is required. If you want to use other languages, you need to have multiple language settings. Take English as an example, in main.js:

<script>
  // Complete introduction
  import Vue from 'vue'
  import Wdatepicker from '@wujiaxian/datepicker'
  import "@wujiaxian/datepicker/dist/Wdatepicker.css"
  import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'

  Vue.use(Wdatepicker, { 
    locale: en 
  })

  // or

  Vue.use(Wdatepicker)
  Wdatepicker.locale(en)

  // or

  import locale from '@wujiaxian/datepicker/dist/lib/locale/index'

  locale.use(en)
  Vue.use(Wdatepicker)
</script>

compatible [email protected]

Vue-i18n of 6.x is not supported by default. You need to process it manually.

<script>
  import Vue from 'vue'
  import Wdatepicker from '@wujiaxian/datepicker'
  import "@wujiaxian/datepicker/dist/Wdatepicker.css"
  import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'

  Vue.use(VueI18n)

  const i18n = new VueI18n({
    locale: 'en',
    message: {
      en: {
        ...en
      },
      cn: {
        //...cn
      }
    }
  })

  Vue.use(Wdatepicker, {
    i18n: (key, value) => i18n.t(key, value)
  })

  new Vue({ i18n }).$mount('#app')
</script>

<script>
  import Vue from 'vue'
  import Wdatepicker from '@wujiaxian/datepicker'
  import "@wujiaxian/datepicker/dist/Wdatepicker.css"
  import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'
  import locale from '@wujiaxian/datepicker/dist/lib/locale/index'

  Vue.use(VueI18n)
  Vue.use(Wdatepicker)

  const i18n = new VueI18n({
    locale: 'en',
    message: {
      en: {
        ...en
      },
      cn: {
        //...cn
      }
    }
  })

  locale.i18n((key, value) => i18n.t(key, value))
</script>

Loading Language Files by CDN

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/@wujiaxian/datepicker"></script>
  <script src="https://unpkg.com/@wujiaxian/datepicker/dist/lib/locale/lang/en.js"></script>

  <script>
    Vue.use(Wdatepicker)
    Wdatepicker.locale(W.lang.en)

    // or

    Vue.use(Wdatepicker, {
      locale: W.lang.en
    })
  </script>

Matching vue-i18n usage

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
  <script src="https://unpkg.com/@wujiaxian/datepicker"></script>
  <script src="https://unpkg.com/@wujiaxian/datepicker/dist/lib/locale/lang/en.js"></script>

  <script>
    Vue.use(VueI18n)
    Vue.use(Wdatepicker)

    const messages = {
      ko: {
        ...W.lang.ko
      }
    }

    const i18n = new VueI18n({
      locale: 'ko',
      messages,
    })
    
    Wdatepicker.i18n((key, value) => i18n.t(key, value))
  </script>

At present, the following languages are built-in:

简体中文（zh_CN）
繁体中文（zh_TW）
English（en）
Japanese（ja）
Korean（ko）

If you need to add a language, please submit it it to me in the following file format.

Languges

License

MIT