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

2919 questions
567
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
  • 23,722
  • 39
  • 106
  • 145
384
votes
27 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,111
  • 4
  • 16
  • 15
315
votes
6 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
  • 60,720
  • 99
  • 311
  • 535
241
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,615
  • 7
  • 32
  • 57
193
votes
11 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
  • 578,732
  • 155
  • 890
  • 933
125
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,660
  • 2
  • 21
  • 30
113
votes
21 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
  • 11,919
  • 19
  • 74
  • 102
95
votes
5 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
  • 134,906
  • 25
  • 152
  • 209
91
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
  • 50,335
  • 109
  • 326
  • 496
87
votes
16 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
  • 13,192
  • 3
  • 42
  • 49
86
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,187
  • 7
  • 37
  • 60
73
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,920
  • 4
  • 22
  • 31
72
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
  • 32,712
  • 19
  • 49
  • 56
71
votes
13 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…
Click Upvote
  • 235,452
  • 251
  • 553
  • 736
68
votes
8 answers

jQuery Datepicker localization

I need a french calendar and I can't understand the problem. I guess I'm not using the regional options like it should be. But... Here is my code : $(function() { $('#Date').datepicker({ showMonthAfterYear: false, showOn: 'both', …
Shipow
  • 2,381
  • 1
  • 20
  • 28
1
2 3
…
99 100