kelvinluck.com

a stroke of luck

jQuery date picker

My jQuery datepicker is a jQuery plugin which allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.

Examples

There are full examples of many different use-cases for jQuery date picker all available from the datePicker homepage.

Version

The jQuery datepicker plugin is currently at version 2.1.1.

You can keep up with all changes to the date picker using the project feeds from the plugin’s googlecode page.

Download

The date picker plugin has it’s own googlecode site – this is where the latest sourcecode and releases can be downloaded from. The latest release will always be a featured download and the cutting edge code will be found in the svn trunk:

http://jquery-datepicker.googlecode.com/svn/trunk/

Previous releases will be tagged in the Subversion tags directory:

http://jquery-datepicker.googlecode.com/svn/tags/

Bug reporting and feature requests

Please submit any bug reports or feature requests through the issues list on googlecode. Please remember to include all information necessary to replicate the bug, including effected browser and operating system and a URL to a test page displaying the problem. Please also first search through the issues list to see if there are any existing related issues.

Donate

The date picker plugin is completely free and open source. However, if you find it useful and you would like to make a donation towards my beer fund then please use the paypal button below to donate any amount. Thanks!


4 Comments, Comment or Ping

  1. prakash

    Hi Kelvin,

    I have used one of your datepicker example(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html) in our website and we have faced one problem while using this. below is the case where we have got the issue

    we have array of products and we need to select subscription start and end dates for each product so in my code I have looped all my products and each products has its own start and end date picker form. I have added your date picker code in each loop and it only work for first product and for remaining products only show calendar but binding doesn't work.

    here is my code

    $(function()
    {
    $('.date-pick').datePicker()
    $('#start-date').bind(
    'dpClosed',
    function(e, selectedDates)
    {
    var d = selectedDates[0];

    if (d) {
    d = new Date(d);
    var start_date = d.getFullYear() + '-' + ('0' + (d.getMonth()+1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2);

    alert(start_date);
    $('#end-date').dpSetStartDate(d.addDays(1).asString());
    }
    }
    );
    $('#end-date').bind(
    'dpClosed',
    function(e, selectedDates)
    {
    var d = selectedDates[0];

    if (d) {
    d = new Date(d);
    var end_date = d.getFullYear() + '-' + ('0' + (d.getMonth()+1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2);
    alert(end_date);
    $('#start-date').dpSetEndDate(d.addDays(-1).asString());
    }
    }
    );
    });

    I have alerted the selected date for start and end date for each binding but alert is comes only for first product and for remaining products it is not alerting selected dates.

    Any help on this?

    June 15th, 2014

  2. @prakash - I answered you where you asked the same question on google code:

    http://code.google.com/p/jquery-datepicker/issues/detail?id=382

    June 15th, 2014

  3. Laura B.

    Hello Kelvin,

    First of all, thank you for this great plugin!!

    I have a quick question. In the "simple datePicker today selected" script:

    http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

    Is it possible to have the next/tomorrow's day displayed in date 2, instead of having today's date in both fields?

    Thank you!
    Laura

    June 17th, 2014

  4. To change the default date just change:

    new Date().asString()

    To:

    (new Date()).addDays(1).asString()

    If you want to have different default dates for different date pickers you will have to give them different IDs and initialise them separately - if you aren't sure how to do that I'd recommend asking on stackoverflow.com

    June 20th, 2014

Reply to “jQuery date picker”