Jquery datepicker - only day and month

Question

I want the user to specify their birthday or anniversary date (without year) in a form. For this, I want to use jquery datepicker but it should not show any year option at all. How to do it?

I tried modifying the code in this so question by making changeDay: true and changeYear: false but could not get it to work.

score 13 · Answer 1 · answered Jul 23 '11 at 08:29

13

You could do:

$('#date').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'dd MM'
    });

fiddle http://jsfiddle.net/u8GnD/1/

answered Jul 23 '11 at 08:29

Nicola Peluchetti

76,206
31
145
192

2

this does not work. the year does not change when a future date is selected. – Ravi Jul 15 '14 at 16:10
your today button is not working how to make it work – Brownman Revival Jun 25 '15 at 07:05
Make sure to change the attribute of the html input to readonly, otherwise you can still change the input value manually. – daino3 Dec 28 '15 at 17:44

score 12 · Accepted Answer · answered Jul 23 '11 at 08:09

12

set the css to hide the year and the dateFormat as K6t said

.ui-datepicker-year{
    display:none;
}

answered Jul 23 '11 at 08:09

Emil Condrea

9,705
7
33
52

how can i distinguish this certain date-picker, when there are other datepickers too? – emfi Mar 11 '16 at 09:07
For cartain datepickers you can use it inside .focus, see this : http://stackoverflow.com/a/41931400/3412696 – Rafi Jan 30 '17 at 08:19
Not suggested, use config instead see https://stackoverflow.com/a/6799216/5277245 – Mehrdad Shokri Dec 16 '17 at 09:32

score 7 · Answer 3 · answered Jan 30 '17 at 08:17

7

You can hide year from a datepicker like this :

$(".daypicker").datepicker( { 
    changeYear: false, 
    dateFormat: 'MM-dd',
}).focus(function () {
    $(".ui-datepicker-year").hide();
});

It wont affect to other datepickers in same page.

answered Jan 30 '17 at 08:17

Rafi

833
13
17

This works will with .on() and .off() to make it temporarilly hiddable – Samuel Jul 27 '17 at 21:56

score 2 · Answer 4 · answered Aug 26 '16 at 08:54

2

$("#datepicker").datepicker( {
format: "dd-MM",
viewMode: "months", 
maxViewMode: "months"
});

this will surely hide year from datepicker view, will show only month and days panel

answered Aug 26 '16 at 08:54

Vivek Chaudhari

1,930
1
14
20

These don't seem to be valid params for the jQuery UI datepicker. – Berend Mar 11 '17 at 05:28

score 0 · Answer 5 · answered Nov 23 '17 at 11:08

0

$( function() {
     var date = $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true, 
        changeYear: false}).val();
});

answered Nov 23 '17 at 11:08

Sohail

587
7
25

3

Always add explanation to your answer. Mere code does not help. – Saqib Omer Nov 23 '17 at 11:41
1

This answer might or might not solve the issue the OP experience, so please always add an explanation to you answer to clarify how it might fix the issue – Gerhard Nov 23 '17 at 11:52

score 0 · Answer 6 · answered Dec 06 '21 at 08:30

I may be late on the show but I found all of the above answers/suggestions and comments to be almost correct but someone might miss the correct jquery plugin to make the code work.

Someone struggling to make it done pls consider changing your javascript plugins first, and use the following instead


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

score -2 · Answer 7 · answered Jul 23 '11 at 08:04

-2

change dateFormat as

dateFormat: 'dd MM',

in datePicker.js file

answered Jul 23 '11 at 08:04

K6t

1,821
1
13
21

10

Don't edit the datepicker code if you can just use the options. – Walf Sep 14 '12 at 06:53

Jquery datepicker - only day and month

7 Answers7

Linked

Related