晓夏

小皇

教育信息化方案砖家

glDatePicker简单灵活的日期选择jQuery插件

浏览量:1222

glDatePicker简单灵活的日期选择jQuery插件

$('#example2').glDatePicker({
    showAlways: true,
    allowMonthSelect: false,
    allowYearSelect: false,
    prevArrow: '',
    nextArrow: '',
    selectedDate: new Date(2013, 8, 5),
    selectableDateRange: [
        { from: new Date(2013, 8, 1),
            to: new Date(2013, 8, 10) },
        { from: new Date(2013, 8, 19),
            to: new Date(2013, 8, 22) },
    ],
    selectableDates: [
        { date: new Date(2013, 8, 24) },
        { date: new Date(2013, 8, 30) }
    ]});
$('#example3').glDatePicker({
    showAlways: true,
    cssName: 'darkneon',
    selectedDate: new Date(2013, 0, 5),
    specialDates: [
        {
            date: new Date(2013, 0, 8),
            data: { message: 'Meeting every day 8 of the month' },
            repeatMonth: true
        },
        {
            date: new Date(0, 0, 1),
            data: { message: 'Happy New Year!' },
            repeatYear: true
        },
    ],
    onClick: function(target, cell, date, data) {
        target.val(date.getFullYear() + ' - ' +
                    date.getMonth() + ' - ' +
                    date.getDate());

        if(data != null) {
            alert(data.message + '\n' + date);
        }
    }});
$('#example4').glDatePicker({
    showAlways: true,
    selectedDate: new Date(2013, 8, 5),
    dowOffset: 3,
    selectableYears: [2012, 2013, 2014],
    selectableMonths: [8, 11],
    selectableDOW: [1, 4, 6]});
// Doing it in a single passvar myDatePicker = $('#example1').glDatePicker({
    showAlways: true,
    selectableDOW: [0, 2, 3]}).glDatePicker(true);// Or you can do it with multiple calls$('example1').glDatePicker({
    showAlways: true,
    selectableDOW: [0, 2, 3]});var myDatePicker = $('example1').glDatePicker(true);
// This example updates some options (calling render will re-generate the calendar)$.extend(myDatePicker.options,{
    cssName: 'darkneon',
    allowMonthSelect: false,
    allowYearSelect: false});myDatePicker.render();// If the calendar is not set to showAlways=true, you can force it to show by calling the show() functionmyDatePicker.show();

http://glad.github.io/glDatePicker/#home


神回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。