jquery支持多种表单类型的日期选择器插件

一款功能丰富的日期选择器插件，不仅适用多种表单类型，还可以自定义回调，非常的实用。

可运用在input/select等表单元素使用，还可进行日期区间范围选取，以及设置弹出层点选特效，非常的灵活丰富。

1）input文本框日历

<script type="text/javascript">
    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#one-date",
        expanderSelector:"#one-calendar"
    });
</script>

2）select下拉菜单日历

<script type="text/javascript">
    $.ctcCalendar({
        inputType:"dropdown",
        monthSelector:"#two-month",
        daySelector:"#two-day",
        expanderSelector:"#two-calendar"
    });
</script>

3）双联排/三联排日历

<script type="text/javascript">
    $.ctcCalendar({
        calendarCount:2,
        inputType:"dropdown",
        monthSelector:"#three-double-month",
        daySelector:"#three-double-day",
        expanderSelector:"#three-double-calendar"
    });

    $.ctcCalendar({
        calendarCount:3,
        inputType:"dropdown",
        monthSelector:"#three-triple-month",
        daySelector:"#three-triple-day",
        expanderSelector:"#three-triple-calendar"
    });
</script>

4）区间范围（select）日历

<script type="text/javascript">
    $.ctcCalendar({
        calendarCount:3,
        inputType:"dropdown",
        monthSelector:"#four-begin-month",
        daySelector:"#four-begin-day",
        expanderSelector:"#four-begin-calendar",
        allowRange:true,
        endMonthSelector:"#four-end-month",
        endDaySelector:"#four-end-day",
        endExpanderSelector:"#four-end-calendar"
    });
</script>

5）区间范围（input）日历

<script type="text/javascript">
    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#five-begin-date",
        expanderSelector:"#five-begin-calendar",
        endDateSelector:"#five-end-date",
        endExpanderSelector:"#five-end-calendar"
    });
</script>

6）区间范围/支持多种日期格式日历

<script type="text/javascript">
    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#six-df1-begin-date",
        expanderSelector:"#six-df1-begin-calendar",
        endDateSelector:"#six-df1-end-date",
        endExpanderSelector:"#six-df1-end-calendar",
        allowRange:true,
        dateFormat:1
    });

    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#six-df2-begin-date",
        expanderSelector:"#six-df2-begin-calendar",
        endDateSelector:"#six-df2-end-date",
        endExpanderSelector:"#six-df2-end-calendar",
        allowRange:true,
        dateFormat:2
    });

    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#six-df3-begin-date",
        expanderSelector:"#six-df3-begin-calendar",
        endDateSelector:"#six-df3-end-date",
        endExpanderSelector:"#six-df3-end-calendar",
        allowRange:true,
        dateFormat:3
    });
</script>

7）弹出层选择日历

<script type="text/javascript">
    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#seven-inline-date",
        expanderSelector:"#seven-inline-calendar",
        calendarDisplay:"inline"
    });

    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#seven-modal-date",
        expanderSelector:"#seven-modal-calendar",
        calendarDisplay:"modal"
    });

    $.ctcCalendar({
        inputType:"text",
        dateSelector:"#seven-full-date",
        expanderSelector:"#seven-full-calendar",
        calendarDisplay:"full"
    });
</script>