Canvas Date/Time Picker Overview

This date/time picker is a canvas based project. The goal was to make a date/time picker that is composed of a single class that has no other dependancies. No React, no Bootstrap, no JQuery, no CSS. The date/time picker has many configurable options, API function calls and callback functions. Days can be excluded or highllighted on initialization or programatically. The look of the date/time picker is also customizeable.

Canvas Date/Time Picker Sample Configurations

Default Date/Time Picker

Customized Date/Time Picker

Opens From the Bottom Right

Opens From the Bottom Left

Opens From the Top Right

Opens From the Top Left

Opens From the Bottom Right, 250 Pixels Max

Opens From the Bottom Left, 250 Pixels Max

Opens From the Top Right, 250 Pixels Max

Opens From the Top Left, 250 Pixels Max

Opens From the Bottom, No Animation

Opens From the Top, No Animation

Date Picker Only

Time Picker Only

Custom Date/Time String

Monday Start of Week

Military Time

Today's Date Indicator Disabled

Arial Black Font Style

Auto Pick on Open Disabled

No Calendar Icon

Custom Text Color

Month and Year Date Views Only

First Date Jan 1, 2000

Last Date Dec 31, 2030

Default Selected Date Dec 25, 1980

Custom Month Background Images

Month Days Excluded, Weekends Whitelisted

Weekends Spotlighted

All Months Spotlighted, Feb, Apr, Jun Whitelisted

2010-2030 Spotlighted, 2020 Whitelisted

Custom Calendar Icon Parameters

Custom Body Canvas Parameters

Custom Info Text Parameters

Custom Selectable Items Parameters

Custom Previous/Next Parameters

Custom Clock Graphic Parameters

Custom Calendar Graphic Parameters

Custom Days of Week Header Parameters

Custom Currently Selected Day Parameters

Custom Today's Date Parameters

Custom Increment/Decrement Parameters

Custom Text Scale Parameters

Not Collapsible, Above Textbox

Not Collapsible, Below Textbox

Not Collapsible, No Textbox

API Function Calls

Most of the configuration parameters demonstrated above can be changed programatically with API function calls. The function calls are listed below. The documentation gives detailed information on the Functions.

getDateTimeString, getDateTimeJSON, setPickerType, getPickerType, setDayExcludeArray, getDayExcludeArray, setDayWhiteArray, getDayWhiteArray, setMonthSpotlightArray, getMonthSpotlightArray, setMonthWhiteArray, getMonthWhiteArray, setYearSpotlightArray, getYearSpotlightArray, setYearWhiteArray, getYearWhiteArray, setMonthImageArray, getMonthImageArray, setFontColors, getFontColors, setDateTimeFormat, getDateTimeFormat, setIsAnimated, getIsAnimated, setMaxPixelWidth, getMaxPixelWidth, setStartOfWeek, getStartOfWeek, setIsMilitaryTime, getIsMilitaryTime, setFontStyle, getFontStyle, setDateRanges, getDateRanges, setTodayIndicator, getTodayIndicator, setTodaysDate, getTodaysDate, setTopView, getTopView, setCalendarIcon, getCalendarIcon, setIsCollapsible, getIsCollapsible, setBodyPosition, getBodyPosition, setDayVertOffset, getDayVertOffset, setIconCanvasParams, getIconCanvasParams, setBodyCanvasParams, getBodyCanvasParams, setInfoTextParams, getInfoTextParams, setSelectableParams, getSelectableParams, setPrevNextParams, getPrevNextParams, setClockParams, getClockParams, setCalendarParams, getCalendarParams, setWeekHeaderParams, getWeekHeaderParams, setSelectedParams, getSelectedParams, setTodaysDateParams, getTodaysDateParams, setIncDecParams, getIncDecParams, setScales, getScales, setZIndex, getZIndex, setDebug, getDebug

Callback Functions

Callback functions can also be used as event listeners when the user changes the state of the calendar. The following is a list of available callback functions. Detailed descriptions of the callback functions can be found in the documentation.

dateTimeStringCb, dateTimeJSONCb, openCb, closeCb, hourChangeCb, minuteChangeCb, ampmChangeCb, TimeClickCb, dateClickCb, monthClickCb, yearClickCb, decadeClickCb, yearViewClickCb, decadeViewClickCb, centuryViewClickCb, monthNextClickCb, monthPrevClickCb, yearNextClickCb, yearPrevClickCb, decadeNextClickCb, decadePrevClickCb, centuryNextClickCb, centuryPrevClickCb

Utility Functions

The utility functions are for getting holiday dates. For floating holidays, a year must be passed to the function. For fixed holidays, the function will return a month and day without any parameters. The utility functions are static.

getEaster, getThanksgiving, getMLK, getMothers, getFathers, getWashington, getMemorial, getLabor, getColumbus, getIndependence, getChristmas, getNewYears, getHalloween, getValentines, getStPatricks, getVeterans