jquery. ptDateSelect.js

jQuery plugin for displaying a popup that allows a user to select a date and set that date back to a form’s input field.

AUTHOR

Paul T.

DEPENDECIES

LICENSE

Copyright © 2007 Paul T.  (purtuga.com) Dual licensed under the:

INSTALLATION

This file jquery.ptDateSelect.js is the only one required.  To install, simply copy it to the same directory as jquery.js and include it in the html pages requiring it’s functionality.

REMINDER

This plugin requires the dimension.js plugin.

EXAMPLES

  • Default look
$(".dateFields").ptDateSelect();
  • Globaly change labels of weekdays and includes custom classes
jQuery.ptDateSelect.labels.days = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday' ];
jQuery.ptDateSelect.css.days = 'dtNorm';
jQuery.ptDateSelectcss.next = 'dtNext';

$('.dateFields').ptDateSelect();

LAST UPDATED

  • $Date: 2007/04/02 17:01:22 $
  • $Author: paulinho4u $
  • $Revision: 1.3 $
Summary
jQuery plugin for displaying a popup that allows a user to select a date and set that date back to a form’s input field.
Inserts a link next to each matched element (ele) that when clicked will display a popup calendar that allows the user to select a date.
Object initialization for DateSelect plugin.
Method makes the date popup visible on the screen.
Returns a label requested by caller.
Hides the calendar popup and nulls out the current elemnt stored in the ptDateSelect variable.
Sets the date that the user clicked on to the input element corresponding to the open popup
Given a js date object, this method returns a date string formated as specified by the user format.
Defines an html table with the monthly calendar in it and writes that to the popup calendar container.
Method that creates the link next to the input fields, which when clicked, displays the popup with the calendar.
Method to set the options for the current element being setup.
The follwoing code is wrapped around each of the matched input fields
Below is the html writen to the DOM by this plugin.

$(ele).ptDateSelect()

Inserts a link next to each matched element (ele) that when clicked will display a popup calendar that allows the user to select a date.  The selected date will then be written to the form’s input element.

PARAMS

opt[object] An object with any of the options as defined by JQuery.ptDateSelectInit().

RETURNS

  • [object] jQuery

EXAMPLE

$('.dateInputs').ptDateSelect();

//Example with custom setup
var myOpt = {
labels: {
x: '[X]',
n: '[>>]',
p: '[<<]',
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday' ]
},
css: {
selected: 'daySel',
days: 'dayNorm'
}
};
$('.dateInputs').ptDateSelect(myOpt);

JQuery. ptDateSelectInit()

Object initialization for DateSelect plugin.  Function sets up the jQuery.ptDateSelect object with the following:

bgcolor[string] Color for the <div> container (id=ptDateSelectCntr) that holds the popup calendar.  Default is white (#ffffff)
labels.x[string] Label for the close link of the popup calendar element.  Default is ‘[Close]’.  The value defined in this label will be wrapped with the <a> html link, thus it can be set to an <img> as well.
labels.p[string] Label for the Previous link.  Default is [Prev.].  The value defined in this label will be wrapped with the <a> html link, thus it can be set to an <img> as well.
labels.n[string] Label for the Next link.  Default is [next].  The value defined in this label will be wrapped with the <a> html link, thus it can be set to an <img> as well.
labels.months[][array] An array of 12 elements (0 though 11) with the labels for each of the months.  Defaults are 0=January, 1=February, 2=March, 3=April, 4=May, 5=June, 6=July, 7=August, 8=September, 9=October, 10=November, 11=December
labels.days[][array] An array of 7 elements (0 though 6) with the labels for the weekdays.  Defaults are 0=Su, 1=Mo, 2=Te 3=We, 4=Tu, 5=Fr, 6=Sa.
labels.calPopup[string]Label for the link that is inserted into the html document, next to input field.  The value defined in this label will be wrapped with the <a> html link, thus it can be set to an <img> as well.
css.cntr[string] Class name to be associated with the overall popup <div> container.
css.month[string] Class name to be associated with the html <table> element that holds the entire calendar (including name, days and prev./next links.
css.days[string] Class name to be associated with the individual days (<td> html tag) of the month.
css.selected[string] Class name to be asociated with the <td> element that holds the selected day.
css.week[string] Class name to be associated with the table row (<tr>) for each week of the month.
css.monthName[string] Class name to be associated with the table header element (<th>) that holds the name of the month.
css.next[string] Class name to be associated with the table column (<td>) that holds the next link.
css.prev[string] Class name to be associated with the table column (<td>) that holds the previous link.
css.close[string] Class name to be asociated with the <div> element That holds the close link.

The following are also set, but should not be manipulated.  These are used internally by ptDateSelect.

_counter[int] Interger that is used when generating the division ids around each <input> element.
_dtCntr[jQuery] jQuery element that points to the ptDateSelect container.
_currEle[object] The <input> element for wich the popup calender is currently opened for.
_eleOpt[object] Object that stores the options for each of the dateSelect applied to the page.

PARAMS

  • none

RETURNS

  • nothing

EXAMPLE

Plugin options can be accessed via jQuery.ptDateSelect

jQuery.ptDateSelect.css.next = "nextClass";
jQuery.ptDateSelect.labels.n = '<img src="/foward.png">';

jQuery. ptDateSelect. show()

jQuery.ptDateSelect.show = function (uId)

Method makes the date popup visible on the screen.  The popup is first positioned next to the input element.

PARAMS

uId[string] The ID of the <div> element that was wrapped around the input form elemnt. this was inserted when $(...).ptDateSelect() was initially called.

RETURNS

ele[object]

jQuery. ptDateSelect. getLabel()

jQuery.ptDateSelect.getLabel = function (lbl,
uId)

Returns a label requested by caller.

PARAMS

lbl[string] Required.  Label token
uId[string] Optional.  Unique id of current dateSelect instance.

RETURNS

  • [string] Label requested.

jQuery. ptDateSelect. hide()

jQuery.ptDateSelect.hide = function ()

Hides the calendar popup and nulls out the current elemnt stored in the ptDateSelect variable.

PARAMS

  • none

RETURNS

  • nothing

jQuery. ptDateSelect. setDate

jQuery.ptDateSelect.setDate = function (dtStr)

Sets the date that the user clicked on to the input element corresponding to the open popup

PARAMS

dtStrDate string to be set

RETURNS

  • nothing

jQuery. ptDateSelect. _getFmtDate()

jQuery.ptDateSelect._getFmtDate = function (dtObj)

Given a js date object, this method returns a date string formated as specified by the user format.

PARAMS

dtObj[object] Date() object.

RETURNS

date[string] date string

jQuery. ptDateSelect. defineCal(dt)

jQuery.ptDateSelect.defineCal = function (dt,
uId)

Defines an html table with the monthly calendar in it and writes that to the popup calendar container.

PARAMS

dt[string] The date to display.  This value will define what month will be highlighted and which day.  If null, it will attempt to get the date currently set in the associated input field.  If one is not defined then the current month is displayed but no date is hightlighted.
uId[string] The unique id of the input element’s container.

RETURNS

  • nothing

jQuery. ptDateSelect. _setSelector()

jQuery.ptDateSelect._setSelector = function (ele,
opt)

Method that creates the link next to the input fields, which when clicked, displays the popup with the calendar.  This method is called from the ptDateSelect iterator.

PARAMS

ele[object] The input element that is being worked on.
opt[object] An object with any of the options as defined by JQuery.ptDateSelectInit().

RETURNS

  • nothing

jQuery. ptDateSelect. _setSelectorOpt()

jQuery.ptDateSelect._setSelectorOpt = function (uId,
opt)

Method to set the options for the current element being setup.

PARAMS

uId[string] The unique id of the <div> for the dateSelect popup.
opt[object] An object with the options

RETURNS

  • none

HTML Wrapped Around Input Fields

The follwoing code is wrapped around each of the matched input fields

<div id="ptDateSelct-#" style="display: inline;"><input/></div>

HTML Popup Created

Below is the html writen to the DOM by this plugin.  This code is written only once and used for all date selections.

<div class=""
style="border: 1px solid rgb(0, 0, 0); padding: 5px; overflow: visible;
z-index: 10; position: absolute; display: block; left: 159px;
top: 142px; background-color: rgb(204, 204, 204); width: 200px; height: 280px;"
id="ptDateSelectCntr">
<div class=""
style="text-align: right;" id="ptDateSelectClose">
<a onclick="jQuery.ptDateSelect.hide();" href="javascript:void(0);">[Close]</a>
</div>
<div style="margin-top: 5px;" id="ptDateSelectMonth">
<table cellspacing="0" cellpadding="2" border="1" align="center"
id="ptDateSelectMonthTbl">
<tbody>
<tr>
<th align="center" class="" id="ptDateSelectMonthName" colspan="7">October 2006</th>
</tr>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
<tr class="">
<td align="center" class="">
<a href="javascript:void(0);">1</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">2</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">3</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">4</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">5</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">6</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">7</a>
</td>
</tr>
<tr class="">
<td align="center" class="">
<a href="javascript:void(0);">8</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">9</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">10</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">11</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">12</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">13</a>
</td>
<td align="center" class="">
<a href="javascript:void(0);">14</a>
</td>
</tr>
...
<tr>
<td colspan="7">
<table width="100%" border="0">
<tbody>
<tr>
<td align="left" class="" id="ptDateSelectPrev">
<a href="javascript:void(0);">[Prev.]</a>
</td>
<td align="right" class="" id="ptDateSelectNext">
<a href="javascript:void(0);">[Next]</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if lte IE 6.5]><iframe style="display:block; position:absolute;top: 0;left:0;z-index:-1; filter:Alpha(Opacity='0');width:3000px;height:3000px"></iframe><![endif]-->
</div>
jQuery.ptDateSelect.show = function (uId)
Method makes the date popup visible on the screen.
jQuery.ptDateSelect.getLabel = function (lbl,
uId)
Returns a label requested by caller.
jQuery.ptDateSelect.hide = function ()
Hides the calendar popup and nulls out the current elemnt stored in the ptDateSelect variable.
jQuery.ptDateSelect.setDate = function (dtStr)
Sets the date that the user clicked on to the input element corresponding to the open popup
jQuery.ptDateSelect._getFmtDate = function (dtObj)
Given a js date object, this method returns a date string formated as specified by the user format.
jQuery.ptDateSelect.defineCal = function (dt,
uId)
Defines an html table with the monthly calendar in it and writes that to the popup calendar container.
jQuery.ptDateSelect._setSelector = function (ele,
opt)
Method that creates the link next to the input fields, which when clicked, displays the popup with the calendar.
jQuery.ptDateSelect._setSelectorOpt = function (uId,
opt)
Method to set the options for the current element being setup.
jQuery plugin for displaying a popup that allows a user to select a date and set that date back to a form’s input field.
Object initialization for DateSelect plugin.