Reputation: 1617

How to remove todays button from datepicker in JQuery?

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

Upvotes: 16

Answers (13)

sumit Sarkar

Reputation: 1

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();       
});

Upvotes: 0

Devidas

Reputation: 181

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

Upvotes: 0

Arman H

Reputation: 1754

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

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

Upvotes: 0

konstantc

Reputation: 71

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.

Upvotes: -1

Wal Heredia

Reputation: 431

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

Upvotes: -1

Peeter

Reputation: 9382

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

Upvotes: 14

sohaib

Reputation: 837

you can hide it with css

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

Upvotes: 5

Luis Batista

Reputation: 171

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

Upvotes: 17

Steve

Reputation: 7867

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.

Upvotes: 3

Gajendra Bang

Reputation: 3583

use this style in your css file

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

Upvotes: 28

viji

Reputation: 1652

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

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

Upvotes: 2

ianace

Reputation: 1635

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

Upvotes: -1

Dharmesh

Reputation: 1059

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

Upvotes: -2

How to remove todays button from datepicker in JQuery?

Answers (13)

Working example on jsfiddle

Related Questions