Question

我是jquery的新手。我想从Jquery中的datepicker中删除今天的按钮。怎么做？我正在使用Jquery ui 1.8.10。

此致吉里什

Answer 1

在css文件中使用此样式

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

Answer 2

我有这个：

$(".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();

隐藏今日按钮

Answer 3

Working example on 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"/>

Answer 4

你可以用css隐藏它

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

Answer 5

您可以通过将showButtonPanel设置为false来删除该按钮，但这会删除所有按钮。如果您只想删除Today按钮，则可以使用以下代码段：

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

这会在您的页面上添加一个样式规则，将Today按钮设置为none，从而隐藏按钮。

归功于JQuery DatePicker Tweaks和jquery create css rule / class @ runtime以获得答案。

Answer 6

您可以使用showButtonPanel选项删除或显示datepicker中的按钮

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

Answer 7

要删除今天按钮，请添加以下行：

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

Answer 8

查看minDate 你可以像这样实现它

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

将今天的日期作为minDate，然后它将排除今天的日期

Answer 9

这是一个例子：

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

这对我有用希望能帮助到你！：）

Answer 10

我遇到了同样的问题，经过一天的研究，我提出了以下解决方案：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>

我知道这个问题已经很老了，但我认为我的解决方案可以对遇到此问题的其他人有用。希望对您有所帮助。

Answer 11

您可以选择合适的日期格式

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

如果你不想要，你可以从上面删除dd This可能会帮助你!!

如何从JQuery中的datepicker中删除今天的按钮？

11 个答案:

Working example on jsfiddle