foxrunsoftware/datepicker

jQuery-based DatePicker with support for date ranges, multiple calendars, styling and more

DatePicker

Yet another jQuery-based date picker! This date picker provides an easy way of creating both single and multi-viewed calendars capable of accepting single, range, and multiple selected dates. Easy to style, with two example styles provided: an attractive 'dark' style, and a Google Analytics-like 'clean' style.

Quick start

Download the latest release, and jQuery.

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/datepicker/js/datepicker.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="/js/datepicker/css/base.css" />
<link rel="stylesheet" media="screen" type="text/css" href="/js/datepicker/css/clean.css" />

<div id="simple-calendar"></div>

<script type="text/javascript">
  $('#simple-calendar').DatePicker({
    mode: 'single',
    inline: true,
    date: new Date()
  });
</script>

Take a look at the examples page for live, and additional examples. Then visit the API reference page.

Bug tracker

Have a bug? Please create an issue here on GitHub!

https://github.com/foxrunsoftware/DatePicker/issues

Changelog

1.0.0 - 3/12/2012

• Initial Release
• Ripped out the built-in date formatter, this should be handled by the client
• Removed the built-in parseDate functionality
• Removed references to the 'week' column
• Styled away the 'not in month' date cells
• Split stylesheet into base.css to allow easier styling, and dark.css as the first full style
• Added 'clean' style similar to Google Analytics date picker
• Greyed out future dates for clean style
• Removed the excessive left/right arrows from multi-month calendars
• Highlight current date
• Calendar month title: clicking when in 'range' mode selects the entire month. Clicking in single/multiple mode swaps between the monthly/yearly view unless there are multiple calendars
• Refactored code for readability
• Renamed options, renamed/refactored callbacks
• Commented code

License/Credits

Copyright 2012, Justin Stern (www.foxrunsoftware.net)

Dual licensed under the MIT or GPL Version 2 licenses.

This project is based on DatePicker from http://www.eyecon.ro/datepicker/ This project is distinct from and not affiliated with the jquery.ui.datepicker

datepicker's Issues

Start always Today in left calendar

i tried --
var today;
var now = new Date();
if (now.getMonth() == 11) {
today = new Date(now.getFullYear() + 1, 0, 1);
} else {
today = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}
...
date: new Date(today)

the start day is marked well, but is not showing,
no matter the initial date set, always begins with the same month

How

layout

i have a problem with layout where calendar not being displayed properly.

How to set to display week number?

Base on Datepicker jqueryUI, we can just set showWeek: true if we need to display number of week. How can we on this function in current plugin?

If current plugin does not contain this function, which file should I modify if I would like to implement this feature option?

Hope to hear from you soon. Thanks.

Dates are greyed out

Why are all the dates after today's date greyed out?

How to add a Submit/Cancel button to the calendar?

Hi,
I'm trying to add a Submit/Cancel button to the Calendar (similar to the way Google Analytics has it). That way, users can click around in the calendar and when they've finally chosen the right range, click submit. (I'm going to have it POST to a new page).

Any pointers on how to do that? I can't insertAfter (jquery) because (it seems) the calendar only gets created when a user clicks on the field. (If that makes sense.)

Any pointers very welcome, I've spent a few hours on this already, if there's an easy way I'd love to know :)

Thanks!

(I've edited the CSS to make the box larger, and I can insert a easily after the , in my Chrome inspect-element editor. But I can't seem to insert the via javascript. Image attached.)

I've used the following code (after adding an ID field to the table) but it's not working:

$( document ).ready(function() {
$("try to insert this stuff").insertAfter( "#thedatepickertable" );
});

Change template?

Is there anyway to get rid of all
TEXT

..and misc uncessecary classes?

Date Format.

Hey,

It would be awesome if you could define a default format. This is, as far as I know not supported. I really like the plugin, but I can't work with the american date format.

I would appreciate this change.

Not receiving last second data for consecutive ranges 23:59:59.000 to 0:0:0.0

Loosing last second data when picking a date range. You end times as tmp.setHours(23,59,59,0); should be setHours(23,59,59,999); so that I do not miss the last second of data. Also might have to change constants line 680 - 684 from 86399000 to 86399999.

Date in onChange

In Firefox when I use onChange's date, the date gets displaced -1 day from the one selected.

You can replicate this on this website's search: http://www.fvflats.com
Open the Console and it will output the date object when onChange is fired on the first field (Check-in)

Thank you

How to disable the future date?

How to disable the future date? i.e. The user is no need to select the future date and it will not be clickable, it will display like a disable state.

What are .datepickerMonths and .datepickerYears for?

Hello,

The two elements with the class names in the title.
What are they for? Future development?

bug with DatePickerSetDate

Hi, great project...

found some this buggy behavior...

when im doing this:
$('#datepicker_calendar').DatePickerSetDate([from, to], true);

the true parameter causing a bug which makes a click on the month name to react weird: instead selecting the whole selected month it is selecting something like 30 days from the current "from" days that currently selected on the calender.

EDIT
seems to be my mistake, one mistake leads to the buggy behavior

Problem with tworanges.

I have a problem with two ranges. When i choose first range for ex: 1/4/2013 - 7/4/2013, and comparison range for ex: 15/4/2013 - 21/4/2013, everything is good highlighted as shown in first image.

After that if i try to change dates for ex: 1/4/2013 - 7/4/2013, and set comparison range now to be different from first one for ex: 8/4/2013. All ranges is changed as shown on image 2.

How can i fix this, or where in code i can search about this and to catch the logic used there. Thanks in advance!

No option to resize calendar

The calendar hardcodes the height and width into my html making it very difficult to resize. Am I missing an obvious command?

Problem in September 2012

September has a Saturday and a Sunday numbered as 1.
This generates a Monday 30 that actually don't exist. (Next month October starts correctly at that Monday as 1)

destroy and reinit

how can i destroy the datepicker instance add to my input element,and then reinit datepicker instance on the input before?

just like the input element inject with a select element with options['text', 'date'] when i want

$.curCss has been removed from jQuery 1.8.0

According to http://blog.jquery.com/2012/08/09/jquery-1-8-released/

$.curCSS: This method was simply an alias for jQuery.css() from jQuery 1.3 onward. Although it has never been part of the documented API, some external code has been known to use it, perhaps thinking it was “more efficient.” Now it’s “more gone.”

Therefore, the following line should be changed, from:
var oldDisplay = $.curCSS(calEl, 'display');

to:
var oldDisplay = $.css(calEl, 'display');

Thanks in advance,
Sebastien.

DateRangesWidget not working in jQuery latest version(after 1.9.0)

DateRangesWidget not working in jQuery latest version(after 1.9.0). It's throw a error

TypeError: date_preset is undefined

if (date_preset.parameters) {

DateRan...dget.js (line 374)

Could you please check this error and fix.
Advanced thanks.
Finoy.

After disabling dates with onRenderCell it is still possible to select the disabled days by clicking on the month

I disable all cells that are not in a specified range using:

onRenderCell: function (element, date) {
return { disabled: checkRange(date), };
}

now I can't select dates that are not in the range.

BUG:
but now if I click on the month on the top the all month is selected even though some of the dates the are disabled.

What about adding yourself to Bower index?

Apply function after selecting second date range

Hi,

I want to apply my function only after the selection of 2nd date ranges from the datepicker or hide the datepicker just after 2nd range date is selected and then apply some function upon closing date pick. Can you guide how can I achieve this?

Resetting Range Selector

I am currently implementing this datepicker. I ran into an edgecase with the rangeSelector where I needed to reset the range from / to property.

example/ I needed it to pretend i did not click on the from date and make the ui's next click to be the same from date click. I was able to easily hack it by:

$("#date_picker_item").find(".datepicker").data("datepicker").lastSel = false;

possibly you might want to make a convenience method for resetting the options like that one?

third month

i want to set the third month as the current month when viewing three calenders. Can't find a way to do that....

In the 'range' mode seconds date doesn't have milliseconds put to the max (999), but 0

Milliseconds should be put to 999.
$('#datepicker-calendar').DatePickerGetDate()[0][1].getMilliseconds()

Positioning problem when opening at the bottom with small window

See the demo - http://jsbin.com/uvigoj/1/edit
Instructions:

• Just make a window small enough (height) until button "set" for example
• click date field
• open window up now

Expected result: datepicker is opened still under the input, not in the middle of the page

Add extra class name to first and the last selected dates

I'd like to add an extra class name to the highlight the first and last dates selected in the "Calendar With Custom Widget" (http://foxrunsoftware.github.io/DatePicker/)

Could anyone help please?

Update end date calendar based on selected start date

I would like to know how we can disable end date based on start date selected. For e.g. if i select todays date as start date i need all dates one month after today to be disabled in end date calendar.

I can do this using onrender cell event and it is working fine. However this works fine once during page load, after the datepicker is rendered and i change a start date I am not able to update end date calendar based on selected start date.

What about browser support?

Hi, I can not find any information about supported browsers...

Similar days

Hi,
There are two similar days in October (10/19/2013)
I have no idea why only in October.

Best Regards

Custom classes for each date

Is there a possiblity to assign a classname to each different date?

Currently i have two dates selected, but i want them both to have another classname, the first one 'blue' and the second one 'red'. Anybody a suggestion? Below my current code. Here i try to give the selected and the not selected dates another classname, but even that doesn't seem to work...

        onRenderCell: function (element, date) {
            if (date.selected == true) {
                return { className: "red" };
            } else {
                return { className: "blue" };
            }
        }

(i18n) How can I use DatePicker in french ?

I want to show days in french.
Thanks

Last day(s) selection

Hi.

I found a problem, when you select Date Range: Last day(s), and appears the input box to select the number of days you want, the calendar doesn't do anything, with or without compare to and if you click apply if you want to open again the DatePicker it w0n't open, you have to refresh the page.

How and where can i do the checking of dates if instead of a valid date it's inserted '0' ?
what i'm saying is in the date range, if selected custom and inserted 0 as dates it will accept.

thk

behavior like Google Analytic candler end date greater than start date

when I select start date then disable previous date and change focus on start date thend enable previous date Like google Analytic calander

prepareDate is called with undefined argument

I am not sure how does it happend, but I see that some users have this methods called with undefined argument. I will add more comment if I find more info.
But maybe you can see problem right away

range is selectable between two enabled dates even if dates are disabled in between

see http://jsbin.com/volis/1/edit

Select the entire month is not working properly after setting the dates dynamically.

In range mode, after setting the dates dynamically, when you click on the name of a month to select the entire month, is not working properly.

Here is a working demo: http://jsfiddle.net/L6nEv/

Click on "Today" link and try to click on a month name to see the error.

(i18n) Start week on Monday

Is it currently possible to configure the datepicker to have weeks starting on Monday rather than Sunday?

If not, this would be a nice addition.