ic datepicker指令 - Julienedies/brick GitHub Wiki

##使用

<table ic-tpl="datePicker"
           ic-date-picker="a"
           ic-date-now
           ic-date-default="2015-10-31"
           ic-date-multiple="true"
           ic-date-enabled="true"
           ic-date-format="YYYY-MM-DD"
           ic-date-week-start="7"
           ic-date-on-render="onRender">

        <caption>
            <span ic-date-prev-m>上月</span>
            <span ic-bind="vm.current"></span>
            <span ic-date-next-m>下月</span>
        </caption>

        <thead>
        <tr>
            <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>
        </thead>

        <tbody>
        <tr ic-for="i, days in vm.weeks">
            <td ic-for="j, day in days"
                ic-date="{{day.date}}"
                ic-date-disabled="day.custom.disabled"
                ic-date-enabled="day.custom.enabled"
                ic-date-status="{{day.status}}"
                ic-class="{{day.selected ? 'selected' : ''}}">
                {{day.n}}
                <div>{{day.position}}</div>
                <div>{{day.custom.text}}</div>
                <div>{{day.custom.status}}</div>
            </td>
        </tr>
        </tbody>

    </table>

查看example

##依赖 require moment.js (https://github.com/moment/moment/)

##相关选项

ic-date-picker #定义一个dom元素为日期选择器
ic-date-now #定义当前日期，通常有server端提供，如果未提供则为浏览器端当前日期
ic-date-default="2015-08-31" #默认选中日期，多个以,或空格分隔
ic-date-format #定义日期格式化格式,默认为YYYY-MM-DD，格式定义详见moment库
ic-date-multiple="true" #是否多选
ic-date-week-start #定义周一到周日的排列顺序，1-7 分别对应周一到周日
ic-date-on-render #自定义render函数，接受一个日期模型对象作为参数，改日期对象封装了相关的日期数据，开发者根据需要渲染成合适的html

##相关dom元素选项

ic-date-prev-m #定义一个dom元素为显示上月按钮，如果有disabled属性，则无效
ic-date-next-m #定义一个dom元素为显示下月按钮，如果有disabled属性，则无效
ic-date #定义一个dom元素为日期选择cell，通过ic-date-enabled属性使其可用

##js接口 $('[ic-date-picker]').icDatePicker('render', vm); //渲染模板，vm是经过自定义onrender函数处理过的日期数据 $('[ic-date-picker]').icDatePicker('recover'); //恢复到上个月

##事件选择一个日期后会触发ic-date-picker.change事件。

$('[ic-date-picker]').on('ic-date-picker.change', function(e, msg){
    //msg => 选中的日期列表。
    console.log(msg);
});

##样式选中的日期项会添加selected类。

ic datepicker指令 - Julienedies/brick GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️