How to remove todays button from datepicker in JQuery?

I am new in jquery. I want to remove todays button from datepicker in Jquer开发者_如何学Pythony. How to do that? I am using Jquery ui 1.8.10.

Regards, Girish

---

use this style in your css file

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

---

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

---

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"/>

---

you can hide it with css

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

---

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.

---

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

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

---

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

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

---

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

---

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

---

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! :)

---

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.

---

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 !!