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) 点击左右修改时间触发