你的位置:首页 > Java教程

[Java教程]js多选日期控件


js多选日期控件

详情请见:http://www.lovewebgames.com/jsmodule/calendar.html

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

 

calendar

js日历控件

用法

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

 

或者

  <input type="text" value="2015-03-14"/>  <input type="text" 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)

  超出限定天数时的回调(多选时)