[js開源組件開發]js多選日期控件

js多選日期控件

詳情請見：http://www.lovewebgames.com/jsmodule/calendar.html

它的github地址：https://github.com/tianxiangbing/calendar

 

calendar

js日歷控件

用法

 <input type="text" id="calendar" value="2015-04-15"/>
    <script src="../src/jquery-1.9.1.min.js"></script>
    <script src="../src/calendar.js"></script>
    <script>
        var calendar = new Calendar();
        calendar.init({
            target: $('#calendar'),
            range: ['2015-3-5', '2015-3-25'],
            multiple: true,
            maxdays: 5,
            overdays: function(a) {
                alert('添加已達上限 ' + a + ' 天');
            }
        });
    </script>

 

或者

    <input type="text" class="calendar" value="2015-03-14"/>
    <input type="text" class="calendar2" value="2015-03-18"/>

    <script src="../dist/jquery-1.9.1.min.js"></script>
    <script src="../dist/calendar-jquery.min.js"></script>
    <script>
        $(".calendar").Calendar({toolbar:true});
        $(".calendar2").Calendar();
    </script>

　　

屬性和方法

屬性

date:

    當前日期.

toolbar:bool

    是否顯示下方操作欄

separator:

    日期分隔符，默認"-".

id:

    日歷容器ID

calendarContainer:

    日歷容器對象

dayArr:

    ['日', '一', '二', '三', '四', '五', '六']

monthArr:

    ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]

isShow:是否顯示中

maxdays:多選時最大天數

方法

setRange:function(range)

設置日期可選范圍的方法

init:function(settings)

settings參數

focusDate:

    當前選中日期{{2015-01-02}}

target:

    觸發日歷的事件結點，可以是input或其他標簽，如果是input會默認取value作為focusDate,
    否則取target的前一個input的value值，或取當前時間.

selected:function(a,b)

    選中后的回調事件，參數為(a)時間對象 ,(b)日歷容器

beforeSelect:function(a,b)

    選擇前觸發方法，參數為(a)時間對象 ,(b)日歷容器

overdays:function(daysnum)

    超出限定天數時的回調（多選時）