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

Answer 1

在您的 css 文件中使用此样式

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

Answer 2

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

Answer 3

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

Answer 4

你可以用css隐藏它

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

Answer 5

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.

Answer 6

您可以使用 showButtonPanel 选项删除或显示日期选择器中的按钮

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

Answer 7

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

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

Answer 8

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

Answer 9

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

Answer 10

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.

Answer 11

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

Answer 12

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