Using jsDatePick

jsDatePick is a javascript date picker that uses DOM techniques to generate its HTML code. Read the parameters and working examples below, and within minutes, you can have a popup date picking solution on your website.

Read below for full documentation of parameters, and to download jsDatePick. We developed jsDatePick as a custom date picking module for our web-based money management software - check it out if you like.

Browser Support: Firefox, Chrome, Safari, Internet Explorer 6+
Download includes jsDatePick standard full/minified, and jsDatePick for jQuery full/minified.

Download.

Production: (26KB, Minified)

Development: (41KB, Full)

28876 downloads so far..

Donate.

Spread the Word.

We'd also be overjoyed if you'd write a blog post, or link back to our site.

jsDatePick - All Parameters

• useMode (Integer) – Possible values are 1 and 2 as follows:
  • 1 – The calendar's HTML will be directly appended to the field supplied by target
  • 2 – The calendar will appear as a popup when the field with the id supplied in target is clicked.
• dateFormat (String) – Enables you to easily switch the date format without any hassle at all! Should you not supply anything this field will default to: "%m-%d-%Y". The possible options are:
  • %d – Day of the month, 2 digits with leading zeros
  • %j – Day of the month without leading zeros
  • %m – Numeric representation of a month, with leading zeros
  • %M – A short textual representation of a month, three letters
  • %n – Numeric representation of a month, without leading zeros
  • %F – A full textual representation of a month, such as January or March
  • %Y – A full numeric representation of a year, 4 digits
  • %y – A two digit representation of a year
• target (String) – The id of the field to attach the calendar to , usually a text input field when using useMode 2.
• weekStartDay (Integer) – Enables you to change the day that the week starts on. Possible values 0 (Sunday) through 6 (Saturday) , Default value is 1 (Monday).
• isStripped (Boolean) – When set to true the calendar appears without the visual design - usually used with useMode 1
• selectedDate (Object) – When supplied , this object tells the calendar to open up with this date selected already.
• yearsRange (Array) – When supplied , this array sets the limits for the years enabled in the calendar.
• limitToToday (Boolean) – Enables you to limit the possible picking days to today's date.
• cellColorScheme (String) – Enables you to swap the colors of the date's cells from a wide range of colors.
  Available color schemes:
  • aqua
  • armygreen
  • bananasplit
  • beige
  • deepblue
  • greenish
  • lightgreen
  • ocean_blue – If you choose not to supply the cellColorScheme variable - the calendar will default to this color.
  • orange
  • peppermint
  • pink
  • purple
  • torqoise

jsDatePick Implementations

new JsDatePick({
	useMode:2,
	target:"aFieldId"
});

    new JsDatePick({
        useMode:2,
        target:"aFieldId",
        dateFormat:"%d/%m/%y",
        isStripped:false,
        selectedDate:{
            year:2009,
            month:4,
            day:16
       	},
        yearsRange: new Array(1971,2100),
        limitToToday:true,
    });

    g_calendarObject = new JsDatePick({
        useMode:1,
        isStripped:true,
        target:"aFieldId",
	  cellColorScheme:"armygreen"
    });
    
    g_calendarObject.setOnSelectedDelegate(function(){
        var obj = g_calendarObject.getSelectedDay();
    
        alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
    });