如何从JQuery中的日期选择器中删除“今天”按钮？

编程问答 2022-04-25

问题描述

| 我是jquery新手。我想从Jquery中的日期选择器中删除“今天”按钮。怎么做？我正在使用Jquery ui 1.8.10。 问候， 吉里什     

解决方法

在CSS文件中使用此样式 
button.ui-datepicker-current { display: none; }
    ,我有这个： 
$(\".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);
该行： 
$(input).datepicker(\"widget\").find(\".ui-datepicker-current\").hide();
隐藏今天按钮     ,jsfiddle上的工作示例 在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\"/>
,你可以用CSS隐藏它 
button.ui-datepicker-current { display: none; }
    ,您可以通过将ѭ6设置为false来删除按钮，但这将删除所有按钮。如果您只想删除
Today
按钮，则可以使用以下代码段： 
$(\'<style type=\"text/css\"> .ui-datepicker-current { display: none; } </style>\').appendTo(\"head\");
这将在页面上附加一个样式规则，该规则将“ 7”按钮设置为不显示任何内容，从而隐藏该按钮。 要感谢JQuery DatePicker的调整，jquery会为答案创建CSS规则/类@运行时。     ,您可以使用showButtonPanel选项删除或显示datepicker中的按钮 
$( \".selector\" ).datepicker({ showButtonPanel: true });
    ,看看这个minDate 你可以这样实现 
$( \".selector\" ).datepicker({ minDate: new Date(2007,1 - 1,1) });
只需将今天的日期作为minDate，则它将排除今天的日期     ,这里有个例子： 
<script>
  $(document).ready(function() {
    $(\"#DATETIME_START\").Zebra_DatePicker({
      format: \"Y-m-d H:i:s\",show_select_today: false
    });
  });
</script>
这对我有用 希望能帮助到你！ :)     ,我遇到了同样的问题，经过一天的研究，我想到了以下解决方案：http://jsfiddle.net/konstantc/4jkef3a1/ 
// *** (month and year only) ***
$(function() { 
  $(\'#datepicker1\').datepicker( {
    yearRange: \"c-100:c\",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,inst) {
      var year = $(\"#ui-datepicker-div .ui-datepicker-year :selected\").val();
      $(this).val($.datepicker.formatDate(\'yy\',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\",false);
});
// --------------------------------



// *** (year only,no controls) ***
$(function() { 
  $(\'#datepicker3\').datepicker( {
    dateFormat: \"yy\",yearRange: \"c-100:c\",showButtonPanel: false,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\",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>
,您可以选择适当的日期格式 
$( \".selector\" ).datepicker({ dateFormat: \'yy-mm-dd\' });
如果不想，可以从上方删除dd 这可能对您有帮助！     
jquery今天今天删除删除删除按钮按钮日期日期选择器选择器