一款基于移动端的日历控件 iantoo.date()

阅读:1836

使用

引入文件:

  1. ./build/css/iantooDate.css
  2. ./build/js/iantooDate.js

并在页面上调用:

  1. iantoo.date()

详细使用方法见page/iantooDate/index.html


兼容性

ios 8.0+
Android 4.0+

预览

haha

github

API

el

type:string 默认 body class | id

日历控件被渲染的地方,element

date

type:string 默认 当前时间

  1. yyyy-mm-dd hh:mm:ss | yyyy-mm-dd

初始化时间的,不设置为初始化系统当前的时间。

setSystemDate

type:string 默认系统时间

  1. yyyy-mm-dd hh:mm:ss | yyyy-mm-dd | 时间戳

手动设置系统时间,通常情况不适用该功能。
主要是为了避免用户修改了手机日历之后,获取的本地与服务器时间不统一,可以通过获取服务器时间进行手动设置。将不在获取本地时间

lang

type:string 默认 'cn' cn | en

选择日历的语言,支持中英文,默认中文

rollDirection

type:string 默认 'UD' UD | LR

日历控件滚动的方向,默认纵向滚动,LR为横向滚动;注:字母为大写。

header

type:boolean 默认 true

是否显示头信息。

week

type:boolean 默认 true

是否显示星期栏

mask

遮罩层设置

mask.show

type:boolean 默认 true

是否显示遮罩层。

mask.closePage

type:boolean 默认 true

点击遮罩层是否关闭日历控件。

elastic

type:number 默认 0.3 0~1

弹性值,是指滑动的距离占整个日历高度的百分比,超过一定百分比之后才可以滚动,否则弹回。

theme

主题颜色配置

theme.selectGB

type:string 默认 不同版本颜色值不同。

被选择的某一天的背景颜色,设置方式可以是 十六进制 #ff8800rgbrgba、最终以element.style.background = color的形式设置。

theme.selectFontColor

type:string 默认 #ffffff

被选择的某一天的恶文字颜色,设置方式同theme.selectGB

theme.systemBG

type:string

系统对应的时间背景颜色。

例如:今天的时间是2018-06-20,通过上面的参数date:'2018-06-22',那么06-22为选中的某一天,06-20为系统时间。当选中的某一天雨系统时间重合时,会以选中的时间theme.selectGB优先显示。

theme.systemFontColor

type:string

系统时间对应的文字颜色。

theme.overdueRemindingColor (已被移除)

type:string

过时的提醒时间的颜色。该效果之后再设置了提醒时间sign之后才会生效。

例如:

  1. iantoo.date({
  2. el:'.newCalendar',
  3. date:'2018-06-22',
  4. theme:{
  5. selectGB:'#33b5e5',
  6. overdueRemindingColor:'#ececec'
  7. },
  8. sign:['2018-06-21','2018-06-23']
  9. })

则当前的初始化时间是2018-06-22,提醒时间中分别有2018-06-21 | 2018-06-23 ,21日是初始化时间之前的时间,为过期时间,提示的背景色会以theme.overdueRemindingColor的颜色显示,23日为还未发生的提示,颜色背景则以theme.selectGB显示。

move

type:boolean 默认 true

当日历控件滑动的时候,是否实时更新日历控件的位置,主要是对部分低端机型做性能处理。
核心代码:禁用之后,主要是对 touchmove事件不在监听和执行渲染。

sign

type:Array 默认 [] ['yyyy-mm-dd','yyyy-mm-dd']

提醒事件,添加之后会在对应的天下面添加一个圆点提醒。

clickDay

  1. `type:Function` `callback : date,close`

点击某一天的时候回调方法。

date:返回当前的时间,
close:调用该方法关闭日历控件。

使用方法:

  1. iantoo.date({
  2. render:function(date,close){
  3. //....
  4. console.info(date) // {Y: 2018, M: 6, D: 29}
  5. close() //关闭日历控件
  6. }
  7. })

render

type:Function callback : opction

每次打开日历控件的时候调用一次。

  1. iantoo.date({
  2. render:function(opction){
  3. /*
  4. {
  5. date:date, //初始化的时间
  6. systemDate:systemDate // 系统时间
  7. }
  8. */
  9. }
  10. })

slide

type:Function callback : date

每次滚动日历之后回调,注:是指日历发生了月份滚动,而不是被回弹回去。

date:当前显示的年、月

clickFooter

type:Function callback : systemDate,close

点击底部的查看今天按钮回调方法。

systemDate:系统时间
close : 关闭日历方法

close

type:Function

日历控件被关闭 之后调用,没有回调参数。

扩展

iantoo.date.close()

在页面调用该方法会直接关闭日历控件

iantoo.data.fmtDate()

传入不同格式的时间可以转换为如下的形式返回,入参形式参考dayjs;通常YYYY-MM-DD | YYYY-MM-DD HH-MM-SS。传入空会返回系统当前时间。

  1. return {
  2. Y:年,
  3. M:月,
  4. D:日,
  5. h:时,
  6. m:分,
  7. s:秒,
  8. w:星期
  9. }
加载中...