ph-datetimepicker

vue-template

Project setup

npm install ph-datetimepicker

###update

• trigger reflow to trigger first time open animation
• update mobile ui
• promote open time performance

接口介绍

import PhDatetimePicker from 'ph-datetimepicker'
//全局配置该步骤可选
createApp(App)
.use(PhDatetimePicker,
//可选全局配置
{
    theme?:{
        type:String,
        default:"dark" //dark|light|primary|success|danger|warning
    },
    weekText?:{
        type:Array as PropType<Array<string>> //['Su','Mo','Tu','We','Th','Fr','Sa']
    },
    importants?:{ //重要节日配置
        type:Array as PropType<Array<{title:string|number,md:string}>>//[{title:'工资',md:'*-20'},{title:'浪',md:'2-9',desc:'去三里屯浪'}]
    },
    lang?:{
        type:String,
        default:"cn" //en
    },
    clear?:{
        type:Boolean,
        default:true // 是否显示清除按钮
    },
    now?:{
        type:Boolean,
        default:true //是否显示现在按钮
    }
})

基本用法

//接口介绍
interface PhDoneResult{
    done:(fn:(dateObj:{k:number})=>void)=>void
}
interface PhDatepickerOpt{
    left, //note: 日历需要显示的位置参考，非日历的左坐标
    top,//note: 日历需要显示的位置参考，非日历的右坐标
    height,//note: 日历需要显示的位置参考，非日历的高度
    width,//note: 日历需要显示的位置参考，非日历的宽度

    mode?:string //<datetime|date|year|month|time>,
    format?:string //[yyyy MM dd hh mm ss]组合,

    min？:"1992-02-20" //范围下限,
    max？://范围上限,start?:string,
    theme?:string,
    weekText?:string[],
    importants?:Array<{title:string|number,md:string,desc:string}>,
    clear?:boolean,
    now?:boolean,
}

//方式一，如果是全局引入通过app.use(PhDatetimePicker),可以使用如下方式
this.phDatetimePicker(value:string="2021-09-20 18:09:45",opt?:PhDatepickerOpt):PhDoneResult//单独
this.phDDatetimePicker(startValue:string,endValue:string,opt?:PhDatepickerOpt):PhDoneResult//双联动

//方式二，按需
PhDatetimePicker
//静态方法，无需模版
.showSingle(c:string||"",opt:PhDatepickerOpt):PhDoneResult
.showCascade(s:string|"",e:string|"",opt:PhDatepickerOpt):PhDoneResult

具体案例

<template>
  <div class="home">
    <button @click="onClick">oepnSingle</button>
    <button @click="onClick1">oepnCascade</button>
    <!-- 或者直接-->
    <PhDatetimeBtn @pick="onPick"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue';
import PhDatepicker,{PhDatetimeBtn} from 'ph-datetimepicker'
export default defineComponent({
  name: 'Home',
  components:{PhDatetimeBtn},
  setup(){
    const onClick = (e:Event)=>{
      const {left,top,width,height} = (e.target as HTMLElement).getBoundingClientRect()
      const opt = {
              left,
              top,
              height,
              width,
              // mode:props.type,
              // format:props.format,
              // min:props.min,
              // max:props.max,
            //   theme:"dark",
              // importants:props.importants,
              // weekText:props.weekText,
              // now:props.now,
              // clear:props.clear
          }
      PhDatepicker.showSingle("2021-09-20 15:09:40",opt).done((a:any)=>{
        console.log(a)
      })
    }
    const onClick1 = (e:Event)=>{
      const {left,top,width,height} = (e.target as HTMLElement).getBoundingClientRect()
      const opt = {
              left,
              top,
              height,
              width,
              // mode:props.type,
              // format:props.format,
              // min:props.min,
              // max:props.max,
            //   theme:"dark",
              // importants:props.importants,
              // weekText:props.weekText,
              // now:props.now,
              // clear:props.clear
          }
      PhDatepicker.showCascade("2021-09-20 15:09:40",'',opt).done((a:any)=>{
        console.log(a)
      })
    }
    const onPick = (a:any)=>{
        console.log(a)
    }
    return {onClick,onClick1,onPick}
  }
});
</script>

在线案例

phoeon