HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

jQuery Datepicker Plugin

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
datepickerjqueryplugin

Problem

I created a jQuery plugin that converts a text field to a 3 drop down, datepicker. It allows the user to select a Day, Month and Year rather than type the date in an input box.

The original input element is hidden and a callback function is provided where the user can format the value for the input box. The id and name attributes are replaced by the original name and id of the element postfixed with Day, Month and Year respectively.

I would like your inputs on the code below. It may be anything from "writing better comments", "architectural improvements" to "performance improvements" or anything that comes to your mind.

JavaScript

```
/**
jQuery Date picker.
Convert a text box into a 3 drop down date picker with day, month and year as
drop downs.

Allowed Parameters:
startDate: restrict the user to this Start date.
endDate: restrict the user to this End date.
dateFormat: a function that returns a string that will be used to fill the
hidden input box.

Gautham PJ
*/
(function ($) {

'use strict';

// The function that handles the Datepicker.
$.fn.datepicker = function (userOptions) {

var $this,
$dayElement,
$monthElement,
$yearElement,

// Keep track of the Months and the number of days in them.
MONTHS = [
{ month: 0, name: 'January', days: 31 },
{ month: 1, name: 'February', days: 28 },
{ month: 2, name: 'March', days: 31 },
{ month: 3, name: 'April', days: 30 },
{ month: 4, name: 'May', days: 31 },
{ month: 5, name: 'June', days: 30 },
{ month: 6, name: 'July', days: 31 },
{ month: 7, name: 'August', days: 31 },
{ month: 8, name: 'September', days: 30 },
{ month: 9, name: 'October', days: 31 },
{ month: 10, name: 'November', days: 30 },
{ month: 11, name: 'December', da

Solution

One thing that caught my attention:

// Check for Leap Year
if (parseInt($yearElement.val(), 10) % 4 === 0) {


I reckon you know that % 4 === 0 is not a reliable check for a leap year. Although as far as I am aware all leap years fulfill this rule, not all years fulfilling the rule are leap years.

I suggest that you try to avoid building calendar logic into your code as much as possible - it is always a pitfall, calendar logic is just too complicated. By the way, your code only supports one specific type of calendar, the one that is being used in western countries.

Alternatively you could try something like building a "test" date from the selected $yearElement and verify if JavaScript accepts it as a valid date to determine whether or not the 29. of February should be supplied.

Update Since JavaScript silently accepts an invalid date but represents it incorrectly, you can use that for your check:

if (new Date(selectedYear, 01, 29).getMonth() == 1) {
    // add 29 to the list
}

Code Snippets

// Check for Leap Year
if (parseInt($yearElement.val(), 10) % 4 === 0) {
if (new Date(selectedYear, 01, 29).getMonth() == 1) {
    // add 29 to the list
}

Context

StackExchange Code Review Q#85577, answer score: 5

Revisions (0)

No revisions yet.