Calendar

初始化

注入到输入框

var myCalendar = new dhtmlXCalendarObject(['i1','i2','i3']) // 数组里面是input的ID

在input后面加一个icon，点击icon弹出日期选择

var myCalendar = new dhtmlXCalendarObject([{input: "inputId", button: "iconID"}])

在一个组件上绑定点击弹出日期选中功能

var myCalendar = new dhtmlXCalendarObject([
    { button: 'icon1' },
])
// button属性的值是某个控件的id，可以是span、a、button、i等等……

利用Form与日期控件结合

var from = [
    { type: "settings", position: "label-left", labelWidth: 120, inputWidth: 145 },
    { type: "calendar", label: "Start Date",  dateFormat: "%Y-%m-%d %H:%i", enableTime: true, calendarPosition: "right" },
]
var myFrom = new dhtmlXForm('myFrom', from)

在toolbar里使用calendar
原理就是将toolbar里的input对象的实例获得，并且传入calendar的构造函数

myCalendar = new dhtmlXCalendarObject(myToolbar.getInput("cal_1"))

属性函数

setDate(Date对象)设置默认的时间
show()让组件显示出来
setParent()可以设置挂载的组件是谁
setPosition('left')设置****calendar弹出的位置
detachObj(挂载组件的id)移除日期组件（不是删除）
attachObj(挂载组件的id)添加日期组件
getFormatedDate()获得时间值
setDateFormat(格式化时间) 可以格式化组件的时间值
setInsensitiveDays([禁止选的时间]) 使得用户无法选中特定的时间
setHolidays(时间) 把日期标记为节假日
构造函数dhtmlXCalendarObject(挂载id)
- 传入控件id可以挂载在控件上
- 传入字面量可以特指到icon、button等组件的点击事件上
- 传入挂载组件的id数组可以批量挂载
生成2个时间组件构造函数dhtmlXDoubleCalendar(挂载id)

间隔模式的组件

以两个input作为间隔
原理其实就是使用两个input中间用文字隔开而已，主要是实现时间范围的限制，我封装了一个类，帮助理解原理

class IntervalDinput {
    constructor(parentList, dictObj) {
        this.myCalendar = new dhtmlXCalendarObject([...parentList])
        this.leftId = '#' + dictObj['leftId']
        this.rightId = '#' + dictObj['rightId']
        this.leftTime = dictObj['leftTime']
        this.rightTime = dictObj['rightTime']
        this.inputBindClick()
        return this.myCalendar
    }
    inputList() {
        let leftInput = document.querySelector(this.leftId)
        let rightInput = document.querySelector(this.rightId)
        let result = [leftInput, rightInput]
        return result
    }
    init() {
        let [leftInput, rightInput] = [...this.inputList()]
        leftInput.value = this.leftTime
        rightInput.value = this.rightTime
    }
    leftBindClick() {
        let [leftInput, rightInput] = [...this.inputList()]
        leftInput.addEventListener('click', () => {
            console.log('click left')
            let maxTime = rightInput.value
            if (maxTime === '') {
                maxTime = null
            }
            console.log(maxTime)
            this.myCalendar.setSensitiveRange(null, maxTime)
        })
    }
    rightBindClick() {
        let [leftInput, rightInput] = [...this.inputList()]
        rightInput.addEventListener('click', () => {
            let minTime = leftInput.value
            console.log(minTime)
            if (minTime === '') {
                minTime = null
            }
            console.log(minTime)
            this.myCalendar.setSensitiveRange(minTime, null)
        })
    }
    inputBindClick() {
        this.leftBindClick()
        this.rightBindClick()
    }
}

// 要用的时候直接实例化它即可达到想要的效果
var intervalInput = new IntervalInput(...)

同时显示的两个间隔时间组件
- setDates(开始时间,结束时间)设置起止时间

示例代码

var myCalendar = new dhtmlXDoubleCalendar('i1')
myCalendar.setDateFormat('%Y-%m-%d')
myCalendar.setDates("2012-08-07","2012-08-23")
myCalendar.show() // 上面三行代码执行完，并没有绘制到页面上，所以要show一下

范围和禁用

范围屏蔽，上面已经在间隔时间组件讲过了
disableDays('week',2) 屏蔽每周2,可以传入数组
- week
- month
- year 比较特殊，必须传入具体时间
enableDays('week')解除上面的屏蔽

一些别的属性与函数

setSkin()设置主题
设置语言的方法(比较掏粪)

dhtmlXCalendarObject.prototype.langData["de"] = {
    dateformat: '%d.%m.%Y',
    monthesFNames: ["Januar",……,'Dezember'月份全名,逗号隔开],
    monthesSNames: ["Jan",……,"Dez"],
    daysFNames: ["Sonntag",……,"Samstag" 星期全名],
    daysSNames: ["So",……,"Sa"],
    weekstart: 一周的起点,
    weekname: "星期的简称",
    today: "语言的“今天”",
    clear: "语言的“清除”"
}

showToday() 选中今天
setWeekStartDay(星期几)设置一周的起点
showMonth(Date对象) 定位到这个时间
showToday() 显示today按钮
hideToday() 隐藏
showTime() 显示当前时间
hideTime() 隐藏
showWeekNumbers() 显示当前第几周
hideWeekNumbers() 隐藏

setTooltip()设置提示信息

myCalendar.setTooltip("2013-03-19,2013-03-22", "鼠标移过来会有提示信息",true,true) 
// 倒数第二个true决定是否有小三角提示，默认是false
// 末尾的决定提示信息是否用popup的形式显示

setMinutesInterval() 设置分钟选择器的间隔时间

事件

onHide 当组件消失
onShow 当组件出现(点击了button弹出之类的)
onClick,callBack(时间值) 当日期被点击
onBeforeChange,callBack(时间值) 当input的值改变要返回ture才能正确使用
onMouseOver,callBack(时间值,事件对象) 当鼠标移动到日期项
onMouseOut,callBack(时间值，事件对象) 当鼠标移开
onPopupShow,callBack(时间值) 当pupup显示的时候触发,前提条件是信息是用popup的形式显示
onPopupHide,callBack(时间值) 当pupup消失的时候触发
onChange,callBack(时间值) 点击导致的时间更改触发
onArrowClick,callBack(oldTime,newTime) 点击左右修改时间触发

dhtmlXCalendarObject日历使用

dhtmlXCalendarObject日历使用

Calendar

初始化

属性函数

间隔模式的组件

范围和禁用

一些别的属性与函数

事件