Better-datepicker

A PC Datepicker with only 9KB

Doc

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

CDN

https://cdn.jsdelivr.net/npm/better-datepicker@0.2.2/

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