How to remove todays button from datepicker in JQuery?

Question

I am new in jquery. I want to remove todays button from datepicker in Jquery. How to do that? I am using Jquery ui 1.8.10.

Regards, Girish

do you mean to remove it or to disable today's date from being selected? — ianace, Apr 18 '11 at 05:26
I want to hide the today button from calendaer in datepicker. — Girish Chaudhari, Apr 18 '11 at 05:45

score 28 · Answer 1 · answered Oct 04 '11 at 12:45

28

use this style in your css file

button.ui-datepicker-current { display: none; }

answered Oct 04 '11 at 12:45

Gajendra Bang

3,593
1
27
32

2

this is what i exactly was looking. it disables the today button at still shows the panel with the X close button. – Eddie Rozenblat Dec 13 '11 at 16:04

score 17 · Answer 2 · answered Jul 12 '13 at 16:24

I have this:

$(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        yearRange: "c-150:c+30",
        showButtonPanel:true,
        closeText:'Clear',
        beforeShow: function( input ) {
            setTimeout(function () {
                $(input).datepicker("widget").find(".ui-datepicker-current").hide();
                var clearButton = $(input ).datepicker( "widget" ).find( ".ui-datepicker-close" );
                clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate( input );});
            }, 1 );
        }
}).attr("readonly", true);

the line :

$(input).datepicker("widget").find(".ui-datepicker-current").hide();

hide the today button

Excellent solution. The CSS solutions will remove it from all the date pickers. Yours is limited to whatever selector you use. — Mark A. Tagliaferro, Apr 04 '16 at 12:27

score 14 · Answer 3 · edited Oct 09 '14 at 12:01

14

Working example on jsfiddle

Read more on docs.jquery.com

$(document).ready(function() {
  $("#datepicker").datepicker({
    "showButtonPanel":  false
  });
});

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<input type="text" id="datepicker"/>

edited Oct 09 '14 at 12:01

Michel Ayres

5,891
10
63
97

answered Apr 18 '11 at 05:59

Peeter

9,282
5
36
53

You could post at least a little snippet of how you did it, it is not that complicated :). – kapa Apr 18 '11 at 07:38
That's nice. I can't access jsFiddle in the last 2 hours for unknown reasons, thus cannot award you a +1. Please always post a little snippet of what you have done, links are not for eternity :). jsFiddles are actually just an addition to your answer, to demonstrate how your solution works. – kapa Apr 18 '11 at 07:46
see also http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – kapa Apr 18 '11 at 07:52
11

What if I want to display the "Done" button ? – fiberOptics May 09 '12 at 03:45

score 5 · Answer 4 · answered Mar 26 '14 at 12:17

5

you can hide it with css

button.ui-datepicker-current { display: none; }

answered Mar 26 '14 at 12:17

sohaib

837
1
12
10

score 3 · Answer 5 · edited May 23 '17 at 12:18

You can remove the button by setting the showButtonPanel to false, but this will remove all buttons. If you want to just remove the Today button, then you can use this snippet of code:

$('<style type="text/css"> .ui-datepicker-current { display: none; } </style>').appendTo("head");

This will append a style rule to your page that will set the Today button to have a display of none thereby hiding the button.

Credit to goes to JQuery DatePicker Tweaks and jquery create css rule / class @ runtime for the answer.

score 2 · Answer 6 · answered Apr 18 '11 at 05:39

2

You can use showButtonPanel option to remove or show the buttons in datepicker

$( ".selector" ).datepicker({ showButtonPanel: true });

answered Apr 18 '11 at 05:39

viji

1,652
2
20
34

score 0 · Answer 7 · answered Feb 15 '21 at 20:38

0

To remove the today button add this line to like below:

$('#sandbox-datepicker').datepicker({
        todayBtn: false 
    });

answered Feb 15 '21 at 20:38

Arman H

1,594
18
22

score 0 · Answer 8 · answered Jun 15 '22 at 06:28

$('.timecalender').datepicker({
                dateFormat: 'yy-mm-dd',
                timeFormat: 'H:mm',
                buttonText: 'Select Date',
                showsTime: true,
                timeOnly: true,
            }).focus(function () {
                $(".ui-datepicker-current").hide();
            });

score 0 · Answer 9 · edited Mar 28 '23 at 21:04

0

Add one more block. Check only $("#sameName").focus();

$( "#sameName" ).datepicker({
  changeMonth: true,
  changeYear: true,
  dateFormat: 'M yy',
  showButtonPanel: true,
  maxDate : 0 });

$("#sameName").focus(function () {        
    $(".ui-datepicker-current").hide();       
});

edited Mar 28 '23 at 21:04

Tyler2P

2,324
26
22
31

answered Mar 24 '23 at 08:08

sumit Sarkar

1
2

score -1 · Answer 10 · edited Feb 28 '18 at 13:43

-1

Here an example:

<script>
  $(document).ready(function() {
    $("#DATETIME_START").Zebra_DatePicker({
      format: "Y-m-d H:i:s",
      show_select_today: false
    });
  });
</script>

this worked for me Hope it helps! :)

edited Feb 28 '18 at 13:43

Tha'er AlAjlouni ثائر العجلوني

14,069
7
33
38

answered Feb 28 '18 at 13:01

Wal Heredia

401
1
6
14

konstantc · Answer 11 · 2019-03-08T01:02:48.037

I had the same problem and, after a day of research, I came up with this solution: http://jsfiddle.net/konstantc/4jkef3a1/

// *** (month and year only) ***
$(function() { 
  $('#datepicker1').datepicker( {
    yearRange: "c-100:c",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('MM yy (M y) (mm/y)', new Date(year, month, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only) ***
$(function() { 
  $('#datepicker2').datepicker( {
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only, no controls) ***
$(function() { 
  $('#datepicker3').datepicker( {
    dateFormat: "yy",
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: false,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    },
    onChangeMonthYear : function () {
      $(this).datepicker( "hide" );
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

<div class="container">

  <h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>

  <hr class="mt-2 mb-3">
  <div class="row text-lg-left">
    <div class="col-12">

      <form>

        <div class="form-label-group">
        <label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>
          <input type="text" class="form-control" id="datepicker1" 
                 placeholder="(month and year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>
          <input type="text" class="form-control" id="datepicker2" 
                 placeholder="(year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>
          <input type="text" class="form-control" id="datepicker3" 
                 placeholder="(year only, no controls)" />
        </div>

      </form>

    </div>
  </div>

</div>

I know this question is pretty old but I thought that my solution can be of use to others that encounter this problem. Hope it helps.

score -1 · Answer 12 · edited Jun 20 '20 at 09:12

-1

check this out minDate you can implement it like this

$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });

just put today's date as the minDate then it will exclude today's date

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 18 '11 at 05:35

ianace

1,646
2
17
31

I want to hide the today button from calendaer in datepicker. – Girish Chaudhari Apr 18 '11 at 05:45

score -2 · Answer 13 · answered Apr 18 '11 at 05:31

-2

you can select the appropriate date format

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

if you do not want you can remove dd from above This might help you !!

answered Apr 18 '11 at 05:31

Dharmesh

1,039
1
12
17

also have a look over here http://jqueryui.com/demos/datepicker/#option-dateFormat – Dharmesh Apr 18 '11 at 05:33

How to remove todays button from datepicker in JQuery?

13 Answers13

Working example on jsfiddle