Better-datepicker

A PC Datepicker with only 9KB

Doc

https://jumodada.github.io/better-datepicker/

CDN

https://cdn.jsdelivr.net/npm/[email protected]/

Installing

Using npm:

$ npm i better-datepicker

Using yarn:

$ yarn add better-datepicker

Usage

es5

import  {createDatePicker} from 'better-datepicker'
import 'better-datepicker/dist/index.css'

CommonJS

const {createDatePicker} = require('better-datepicker').default
require('better-datepicker/dist/index.css')

Example

<input type="text" id="input">

  const input = document.querySelector('#input')
  createDatePicker(input,{
    placement: 'bottom',
    type: 'date',
    zIndex: 2000,
    format: 'yyyy/MM/dd'
  })

you can also

  <div id="wrapper">
     <span>Including children, find the first inputElement</span>
     <input type="text">
  </div>
  <script >
    const input = document.querySelector('#wrapper')
    createDatePicker(input,{
      placement: 'bottom',
      type: 'date',
      zIndex: 2000,
      format: 'yyyy/MM/dd'
    })
  </script>

todo: support virtual dom

Options Validator

If the format is illegal, it will use default value

Options

| Options | Description | Type | Accepted Values | Default | |---------|------------ |---------- |------------- |-------- | | placeholder | To set placeholder | string | - | - | | type | Type of datepicker | string | date/date-range/month/month-range/year/year-range/week | date | | format | To set the date format | string | - | yyyy/MM/dd | | classes | To set the picker wrapper classes(It will have a logo prefix: better-datepicker) | string[] | - | - | | zIndex | z-index of Picker | number | - | 2000 | style | To set the picker wrapper style(zIndex Priority is lower than above) | Object | - | - | | placement | Placement of datepicker | string | top/bottom/right/left | bottom | | disabledDate | Specifies the date that cannot be selected | function | - | - | | offset | Distance between Picker and inputElement | number | - | 12 | | insertTo | Name of the node inserted | string | body/parent | body | | binding | Bind the value of the inputElement | boolean | - | true | | themeColor | Theme color(selected、hover、range-start、range-end), like #2ECC71 | string | - | - | rangeBgColor | The backgroundColor that element is in range ,It's usually lighter than the themeColor | string | - | - | tdColor | Td text color | string | - | - | thColor | Th text color | string | - | -

Default Options

global config

  import {defaultOptions} from "better-datepicker"
  defaultOptions({
    placement: 'bottom',
    type: 'date',
    zIndex: 2000,
    format: 'yyyy/MM/dd'
  })

Theme

you can use defaultOptions

  import {defaultOptions} from "better-datepicker"
  defaultOptions({
    themeColor: '#1890ff',
    rangeBgColor: '#e6f7ff',
    tdColor: '#5f5f5f',
    thColor: '#5f5f5f'
  })

or

only changes theme of the current instance

     const input = document.querySelector('#wrapper')
     const instance = createDatePicker(input,{
         themeColor: '#1890ff',
         rangeBgColor: '#e6f7ff',
         tdColor: '#5f5f5f',
         thColor: '#5f5f5f'
     })

Locale

global config

  import {locale} from "better-datepicker"
  import zhCn from 'better-datepicker/dist/locale_es/zh-cn'    // es
  //require('better-datepicker/dist/locale_umd/zh-cn') // cjs
  locale(zhCn)

| Locale/Language | Abbreviation/Link | | ----------------- | -------------------------------- | | Afghanistan | af | | Brazil | br |
| English | en | | Australia | en-au | | Canada | en-au | | England | en-gb | | Ireland | en-ie | | Spain | es |
| Finland | fi | | Angola | fo |
| Faroe Islands | fr |
| Croatia | hr |
| Haiti | ht | | Italy | it |
| Japan | ja | | Korea(South) | ko | | Kuwait | ku | | Lebanon | lb | | Laos | lo | | Ukraine | uk | | Uzbekistan | uz | | Chinese | zh | | Simplified Chinese | zh-cn | | Hong Kong China | zh-hk | | Taiwan China | zh-tw |

or configure your own region

  import {locale} from "better-datepicker"
  const CubaLocale =  {
    name: 'Cuba',
    weekStart: 6,  //Saturday is set as the first day of the week
    months: ["کانونی دووەم", "شوبات", "ئازار", "نیسان", "ئایار", "حوزەیران", "تەمموز", "ئاب", "ئەیلوول", "تشرینی یەكەم", "تشرینی دووەم", "كانونی یەکەم"],
    weekdays: ["ی", "د", "س", "چ", "پ", "ه", "ش"], //short for week
    weekFormat: 'yyyy-ww'
  }
  locale(CubaLocale)

Instance methods

| name | Description | params | |---------|------------ |------------ | | destroyed | destroyed the datepicker,clear InputElement value| - | onChange | called callback when date has changed |(callback) | update | Update configuration, remove old datepicker | (options) | getCurrentDate | get current date | - | open | open the datepicker | - | close | close the datepicker | - | clear | clear the date | -

DESTROY

  import {destroy} from "better-datepicker"

  const picker1 = createDatePicker('#input1')
  
  // picker1.destroyed()

  const picker1 = createDatePickerc('#input2')
  destroy([picker1,picker2]) // destroyed picker1 and picker 2
  destroy() //destroyed all 

USE IN VUE

Reactive updates have been supported since version 0.2.2

When a property of props is changed, the datepicker is also updated

<template>
  <el-input ref='input'></el-input>
</template>

<script lang='ts'>
import '../../../assets/svg/svg'
import { defineComponent, toRefs } from 'vue'

import { createDatePicker } from '../../../../../src'

export default defineComponent({
  name: 'datepicker',
  data() {
    return {
      datepicker: null,
    }
  },
  mounted() {
    const input = this.$refs.input
    this.datepicker = createDatePicker(input.$el, this.$props)
  }
})
</script>

TODO LIST

| versions | Description| |---------|------------ | | 0.5.0 | support unlinkPanels、zIndex、readonly、default-value、className、style、size .... | | 0.7.0 | support extends plugins | | 0.9.0 | support time picker |

Browser support

todo

License

MIT