better-datepicker v0.2.3

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

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)

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

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

Browser support

todo

License

MIT