jquery ui datepicker day/month only, not year selection

Question

I've searched here in SO and all around but no properly solutions founded for this issue. With jQueryUI DatePicker I need to select a recursive date for all years, so I don't wanna show year selection, 'cause it doesn't make sense.

How can I obtain this inside the call like the following?

$('#myInput').datepicker({ dateFormat: "dd/mm" });

Note: I can't use css solution as suggested here .ui-datepicker-year{ display:none; } because there are other datepickers in the same page.

Any help will be appreciated.

Thanks in advance.

score 14 · Accepted Answer · edited Oct 24 '18 at 07:31

14

Try this demo: http://jsfiddle.net/rAdV6/20/
Also see both screenshots below.

To elaborate further, this fix will allow to have multiple date pickers with or without year on top appear on the top of the calendar.

jQuery code:

$('.DateTextBox.NoYear').datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.addClass('NoYearDatePicker');
    },
    onClose: function(dateText, inst){
        inst.dpDiv.removeClass('NoYearDatePicker');
    }
});

$('#datepicker').datepicker( { changeYear: false, dateFormat: 'dd/mm',});
$('#datepicker1').datepicker( { changeYear: true, dateFormat: 'dd/mm', });
$('#datepicker2').datepicker( { changeYear: false, dateFormat: 'dd/mm', });

CSS:

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

HTML:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

date (without year) <input type="text" id="datepicker" class="DateTextBox NoYear">

<br />
date 1: (With year) <input type="text" id="datepicker1" >
<br />
date 2: (Without year) <input type="text" id="datepicker2" class="DateTextBox NoYear">

How it appears in my lappy OSX:

enter image description here

edited Oct 24 '18 at 07:31

Pang

9,564
146
81
122

answered Apr 20 '12 at 08:51

Tats_innit

33,991
10
71
77

Thanks @Tats_innit but I can't see the correct result, I always see the year selection visible. I'm on FF11/Mac. – bobighorus Apr 20 '12 at 08:56
Hiya @bobighorus really? Bruv I cannot see year in this jsfiddle let me paste a pic in my post I am in OSX LION/Saf. see I have attached a pic above bruv :)) – Tats_innit Apr 20 '12 at 08:59
@bobighorus Ah so you need year instead of month? Sorry , just want to be very sure bruv? Can you comment again what should actually appear will give you a solution! cheerios :) – Tats_innit Apr 20 '12 at 09:18
Thanks @Tats_innit. The point is, as I write in the question, that I can't use this css solution because there are other datepickers in the same page :) – bobighorus Apr 20 '12 at 09:32
@bobighorus Aha aha okies I can try providing you some solution - so what kind of date picker solution suits you pic 1 or pic 2 bruv? and I will try to create jsfiddle with 2 or 3 date picker with behavior you want! cheerios – Tats_innit Apr 20 '12 at 09:33
solution in pic1 is perfect bruv :) cheerios – bobighorus Apr 20 '12 at 09:38
@bobighorus bruvenosaourus - does this suits you ? http://jsfiddle.net/rAdV6/4/ check it out **I have created 3 input boxes and 2 of them with month and one with month and year both** and lemme know how it goes ;) ! cheerios – Tats_innit Apr 20 '12 at 09:39
thanks sir, but now I still see "2012" :( I need pic1 solution without css! Ok, I'll pay you a beer! – bobighorus Apr 20 '12 at 09:46
@bobighorus saweet bruv :) done we wil hit the pub after this lolz! jokes apart do you wanna take this conversation to chat Th sample I gave here : http://jsfiddle.net/rAdV6/4/ **only shows (without anything on css)** the year in the middle text box to show you that you can have multiple styles **If you note the text box first and third will not have years in it but the middle one only** yea? I deliberately showed the year in the middle text box to show you the difference and also to show that you can have multiple date picker some with year some without, Cheerios – Tats_innit Apr 20 '12 at 09:50
I see all three boxes with year indication ulike the pic1 ok, definitively moving to the chat :) – bobighorus Apr 20 '12 at 09:55
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10312/discussion-between-bobighorus-and-tats-innit) – bobighorus Apr 20 '12 at 09:56

Chinmaya003 · Answer 2 · 2012-04-20T09:04:59.580

1

Try this:

$("#myInput").datepicker();
$("#myInput").datepicker("option", "dateFormat", "dd/mm");

As jQuery UI DatePicker Documentaion,

http://docs.jquery.com/UI/Datepicker#option-dateFormat

You have to call below function in Initialization.

$("#myInput").datepicker({ dateFormat: "dd/mm" });

It will not work if you call it after init method.

edited Apr 20 '12 at 09:04

answered Apr 20 '12 at 08:57

Chinmaya003

474
3
10

Thanks @Chinmaya003 but it doesn't work. Nothing changes, I still see Year selection. – bobighorus Apr 20 '12 at 09:19
Please check this **JSFiddlelink** http://jsfiddle.net/KKhZg/88/ And please check if your Code is working in JSFiddle or not. – Chinmaya003 Apr 20 '12 at 09:24
Sorry @Chiamaya003 I still see "2012" – bobighorus Apr 20 '12 at 09:40

score 1 · Answer 3 · answered Nov 01 '16 at 20:22

Building upon the answer from Tats_innit, here is a solution which solves a couple of its problems.

$(function() {
  $('.dp').datepicker({
    dateFormat: 'd MM yy',
    beforeShow: function(inp, inst) {
      if (inp.classList.contains("Birthday")) {
        inst.dpDiv.addClass('BirthdayDatePicker');
        return {
          dateFormat: 'MM d',
          defaultDate: new Date(1904, 0, 1),
          minDate: new Date(1904, 0, 1),
          maxDate: new Date(1904, 11, 31),
        };
      }
    },
    onClose: function(dateText, inst) {
      inst.dpDiv.removeClass('BirthdayDatePicker');
    }
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Birthday: <input type='text' class='dp Birthday' placeholder='Month day'>

<div style="height: 12px" class="spacer"></div>

Defaults: <input type='text' class='dp' placeholder='day Month year'>

I find that using a class on the input is a simpler way to specify which behavior we want out of the datepicker.

If the Birthday class is found, we use the year 1904 rather than whatever the current year is because 1904 is a leap year which insures that February 29th is available. Also we limit the widget to one 12-month period with the minDate/MaxDate options. You could also include numberOfMonths: [ 3, 4 ] in the return'd object to display the whole year at once if you like.

BTW, 1984 is a leap year which started on on Sunday, if that's important to you. — John Hascall, Oct 29 '19 at 19:02

score 1 · Answer 4 · answered Jun 03 '17 at 11:43

I know it's a pretty old quesion, but maybe it will be helpful for someone. If you set the option changeYear: false you can see a <span> with an year value, but if you set changeYear: true you can see a <select>. We can use this difference like this:

$(function() {
  $("#year-datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });

  $("#no-year-datepicker").datepicker({
    dateFormat: "MM d",
    changeMonth: true,
    changeYear: false
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

<p>With year: <input type="text" id="year-datepicker"></p>
<p>Without year: <input type="text" id="no-year-datepicker"></p>

score 0 · Answer 5 · answered Apr 20 '12 at 08:41

0

Couldn't you do

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

to restrict it to just the datepicker you're concerned about?

answered Apr 20 '12 at 08:41

Graham Clark

12,886
8
50
82

Thanks Graham I tried but it doesn't work, 'cause I found that datepicker is not appended on the single input. – bobighorus Apr 20 '12 at 08:46

score 0 · Answer 6 · answered Jan 30 '17 at 08:24

0

Simple solution for 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:24

Rafi

833
13
17

jquery ui datepicker day/month only, not year selection

6 Answers6

Linked