Calendar and date-picker

• » Overview
• » Example 1
• » Example 2
• » Usage & params
• » Styling & config
• » Notes

Overview

This was built to be the most versatile calendar/date-picker on the internet. It boasts a multitude of features, giving you a plethora of options to control what dates are selectable, what wakes up / hides the calendar, what happens on callback when a date is selected, and much more.

Example 1

The calendar is woken up by focus on the textfield, you select your DOB, and the date is written into the field.

The code behind this example:

Example 2

The code behind this example:

Notice that, in this example, the calendar is visible to start with. That's because no elements are specified (focusElements) to wake up/hide the calendar on focus/focus out.

Usage & params

Global preferences are set in the config section of the source file. Each calendar is invoked by calling new calendar(params), where params is an object of parameter/value pairings from the following:

focusElements (string) - a jQuery selector of element(s) that, on receiving focus, wake up the calendar, and hide it agian on losing focus

clickElements (string) - as with focusElements but for click events, not focus

callback_var (object) - a string representing the name of a global variable to which will be assigned the value of the clicked date

callback_field (string) - ID or jQuery selector of field element(s) whose value will be set to the clicked date, once one is clicked

callback_func (function) - a string representing the name of a function to be called when a date is clicked

callback_url (string) - URL to be loaded when date clicked. Should contain three tokens: %d, %m and %y, which will be replaced by the appropriate parts of the clicked date

yearSelect obj - to allow users to quickly change year with a drop-down, pass this as an object containing 'start' and 'end' as yyyy year values

datePartsAsArray (bool) - if true, returns clicked date as a 3-part array (d, m, y), as opposed to a dd/mm/yyyy string

monthAsWord (bool) - if true, if true, returns 3-letter representation of month part of the clicked date, e.g. dec, not 12

noLeadingZeros (bool) - if true, returned day and month parts of clicked date will not contain leading zeros if < 10

startMonthAndYear (string) - to start the calendar on a specific month and year other than the present, pass this (m(m)/yyyy). Note: if passing a yearSelect range, too (see above), ensure this date is within that range

startDay (int) - the day of the month that should be 'on' to begin with

highlightDayOnStart (string) - number representing date of the month to start as 'on' (i.e. as though it had been clicked)

futureOnly (bool) - if true, months subsequent to the current month cannot be viewed, and remaining days in the current month subsequent to the present day cannot be selected. Don't pass this if also passing a yearSelect range.

pastOnly (bool) - like futureOnly, but for the past.

allowedDates (object) - 3-level object in format 2009 => 05 => [1,13,15] of dates that are clickable. If not passed, all are clickable.

disallowedDates (object) - disallowedDates: if it's more convenient to stipulate which dates are NOT clickable rather than those that are, pass this. Works like allowedDates

additionalCSS (object) - an object of property/value CSS pairings to further style the calendar

Styling & config

You can set global styles and preferences in the script file itself, in the config section near the top of the script file. Note that styles set in the additionalCSS parameter, if passed, trump the config if there is a clash.

Notes

Loading jQuery

By default, this script assumes you're loading jQuery via Google (why might you do this?). If, instead, you're loading jQuery from a local copy in your site folder, update the document ready handler (DRH) in the script file:

Hey.. i like too much your calendar.js, and i want to use this on my site. But i have one question, its possible use this with SQL to show sentences stored on database? like an alert ?

Yes - you'd need to pull the sentences out of the database first and get them into a JavaScript array or object. Then, alert one of them when a date is clicked, by setting a callback function to the clickCallback param.

Hi,

I need the format "yyyy-mm-dd" as output. How can I change it?

 - see example 2 on this page. Use a callback function and also pass the datePartsAsArray param. That will ensure the selected date is passed to your function in an array containing 3 elements - the 3 parts. You can then do what you want with these manually in any format you want.