Stack Overflow
Stack Overflow

Questions tagged [jquery-ui-datepicker]

A datepicker widget from jQuery-ui which allows the user to select a date from a popup or inline calendar

The Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format, language, restrict the selectable date ranges, add buttons and other navigation options easily. The style is fully customizable.

More information can be found on the jQuery UI website and in the API Documentation. For localization visit the GitHub repository.

Example:

$("#selector").datepicker({
  // Options
});

Options:

  • altField
  • altFormat
  • appendText
  • autoSize
  • beforeShow
  • beforeShowDay
  • buttonImage
  • buttonImageOnly
  • buttonText
  • calculateWeek
  • changeMonth
  • changeYear
  • closeText
  • constrainInput
  • currentText
  • dateFormat
  • dayNames
  • dayNamesMin
  • dayNamesShort
  • defaultDate
  • duration
  • firstDay
  • gotoCurrent
  • hideIfNoPrevNext
  • isRTL
  • maxDate
  • minDate
  • monthNames
  • monthNamesShort
  • navigationAsDateFormat
  • nextText
  • numberOfMonths
  • onChangeMonthYear
  • onClose
  • onSelect
  • prevText
  • selectOtherMonths
  • shortYearCutoff
  • showAnim
  • showButtonPanel
  • showCurrentAtPos
  • showMonthAfterYear
  • showOn
  • showOptions
  • showOtherMonths
  • showWeek
  • stepMonths
  • weekHeader
  • yearRange
  • yearSuffix

References

Related Tags

2969 questions
594
votes
29 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code:
And the following JS: $('#datepicker').datepicker(); When I try to return the value with this code: var date =…
tarnfeld
  • 25,992
  • 41
  • 111
  • 146
394
votes
31 answers

jQuery UI DatePicker to show month year only

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?
Aanu
  • 4,221
  • 4
  • 18
  • 15
325
votes
7 answers

jQuery UI: Datepicker set year range dropdown to 100 years

Using the Datepicker the year drop down by default shows only 10 years. The user has to click the last year in order to get more years added. How can we set the initial range to be 100 years so that the user will see a large list by default? …
Ian Vink
  • 66,960
  • 104
  • 341
  • 555
268
votes
19 answers

jQuery UI Datepicker onchange event issue

I have a JS code in which when you change a field it calls a search routine. The problem is that I can't find any jQuery events that will fire when the Datepicker updates the input field. For some reason, a change event is not called when Datepicker…
zbestzeus
  • 2,837
  • 2
  • 18
  • 9
245
votes
19 answers

How do I pre-populate a jQuery Datepicker textbox with today's date?

I have a very simple jQuery Datepicker calendar: $(document).ready(function(){ $("#date_pretty").datepicker({ }); }); and of course in the HTML... Today's date is nicely highlighted…
Marcus
  • 5,772
  • 8
  • 35
  • 60
197
votes
13 answers

Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?
cletus
  • 616,129
  • 168
  • 910
  • 942
128
votes
12 answers

How do I localize the jQuery UI Datepicker?

I really need a localized dropdown calendar. An English calendar doesn't exactly communicate excellence on a Norwegian website ;-) I have experimented with the jQuery DatePicker, their website says it can be localized, however that doesn't seem to…
Thomas Eyde
  • 3,820
  • 2
  • 25
  • 32
122
votes
24 answers

How to change the pop-up position of the jQuery DatePicker control

Any idea how to get the DatePicker to appear at the end of the associated text box instead of directly below it? What tends to happen is that the text box is towards the bottom of the page and the DatePicker shifts up to account for it and totally…
gfrizzle
  • 12,419
  • 19
  • 78
  • 104
120
votes
7 answers

Elegant method to generate array of random dates within two dates

I have a datepicker where I show two months and I want to randomly choose 3 dates in each visible month $('.date').datepicker({ minDate: new Date(), dateFormat: 'DD, MM, d, yy', constrainInput: true, beforeShowDay: processDates, …
mplungjan
  • 169,008
  • 28
  • 173
  • 236
97
votes
17 answers

How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?

How do I reset the datepicker calendar values?.. The min and max date restrictions? The problem is that when I clear the dates (by deleting the textbox values), the previous date restrictions are still applied. I've been sorting through the…
Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
96
votes
16 answers

jQuery Date Picker - disable past dates

I am trying to have a date Range select using the UI date picker. in the from/to field people should not be able to view or select dates previous to the present day. This is my code: $(function() { var dates = $( "#from, #to" ).datepicker({ …
Harsha M V
  • 54,075
  • 125
  • 354
  • 529
90
votes
7 answers

Jquery UI datepicker. Disable array of Dates

I have been trying to search for a solution to my Jquery ui datepicker problem and I'm having no luck. Here's what I'm trying to do... I have an application where i'm doing some complex PHP to return a JSON array of dates that I want BLOCKED out of…
Daniel White
  • 3,337
  • 8
  • 43
  • 66
77
votes
9 answers

Disable future dates in jQuery UI Datepicker

Is it possible to disable future date from today? Let say today is 23/10/2010, so 24/10/2010 onwards are disabled. Sorry I am very new in jQuery and JavaScript.
cicakman
  • 1,970
  • 4
  • 22
  • 33
73
votes
13 answers

Set today's date as default date in jQuery UI datepicker

I just want today's date to be the default value in the input that is using jQuery UI's datepicker: I tried the below code but it didn't work: var currentDate = new Date(); …
Chris Abrams
  • 39,732
  • 19
  • 51
  • 57
72
votes
14 answers

How to add/subtract dates with JavaScript?

I want to let users easily add and subtract dates using JavaScript in order to browse their entries by date. The dates are in the format: "mm/dd/yyyy". I want them to be able to click a "Next" button, and if the date is: " 06/01/2012" then on…
Ali
  • 261,656
  • 265
  • 575
  • 769
1
2 3
…
99 100