jquery. ptDateSelect.jsjQuery plugin for displaying a popup that allows a user to select a date and set that date back to a form’s input field. AUTHORPaul T. DEPENDECIESLICENSECopyright © 2007 Paul T. (purtuga.com) Dual licensed under the: INSTALLATIONThis 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$(".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. PARAMSRETURNSEXAMPLE$('.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. |
PARAMSRETURNSEXAMPLEPlugin 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. PARAMSuId | [string] The ID of the <div> element that was wrapped around the input form elemnt. this was inserted when $(...).ptDateSelect() was initially called. |
RETURNS
jQuery. ptDateSelect. getLabel()jQuery.ptDateSelect.getLabel = function ( | lbl, | | uId | ) |
|
Returns a label requested by caller. PARAMSlbl | [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. PARAMSRETURNS
jQuery. ptDateSelect. setDatejQuery.ptDateSelect.setDate = function ( | dtStr | ) |
|
Sets the date that the user clicked on to the input element corresponding to the open popup PARAMSdtStr | Date string to be set |
RETURNS
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. PARAMSdtObj | [object] Date() object. |
RETURNS
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. PARAMSdt | [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
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. PARAMSele | [object] The input element that is being worked on. | opt | [object] An object with any of the options as defined by JQuery.ptDateSelectInit(). |
RETURNS
jQuery. ptDateSelect. _setSelectorOpt()jQuery.ptDateSelect._setSelectorOpt = function ( | uId, | | opt | ) |
|
Method to set the options for the current element being setup. PARAMSuId | [string] The unique id of the <div> for the dateSelect popup. | opt | [object] An object with the options |
RETURNS
HTML Wrapped Around Input FieldsThe follwoing code is wrapped around each of the matched input fields <div id="ptDateSelct-#" style="display: inline;"><input/></div>
HTML Popup CreatedBelow 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>
|