ctcCalendar Date Picker Plugin Examples

Download This Plugin Back To jQueryScript

A full-featured jQuery date picker plugin for easy, intuitive selection of dates.

Example One: Text Calendar

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

Example Two: Dropdown Calendar

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

Example Three: Double & Triple Calendars

<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>

Example Four: Simple Range

<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>

Example Five: Text Range

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

Example Six: Text Range with Alternate Date Formats

<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>

Example Seven: Alternate Calendar Displays

<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>