Jquery Datepicker显示当前日期

时间:2017-08-07 05:47:01

标签: jquery jquery-ui

我想在日期选择器的末尾显示今天的日期作为附加图像。

$(document).ready(function () {            

        $("#TextBox1").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: "button",
            buttonImage: "../calendar_up.gif",
            buttonImageOnly: true,
            buttonText: "Select date",
            showOtherMonths: true,
            selectOtherMonths: true
        });

enter image description here

任何配置都可以实现这一目标吗?

TIA

2 个答案:

答案 0 :(得分:2)

我找不到任何选项,但你当然可以让它看起来像是选择器的一部分:

var $datepicker = $("#datepicker").datepicker({
  changeMonth: true,
  changeYear: true,
  showOn: "button",
  buttonImage: "../calendar_up.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  showOtherMonths: true,
  selectOtherMonths: true
});

var $today = $datepicker.append("<div class='ui-widget ui-widget-content ui-helper-clearfix ui-corner-bottom' style='display:block;padding:2px;position:relative;top:-2px'>TODAY: " + formatDate(new Date()) + "</div>");

var $datePickerInner = $(".ui-datepicker");

$today.css("width", $datePickerInner.width() + 9.4 + "px");
$datePickerInner.removeClass('ui-corner-all').addClass('ui-corner-top');

function formatDate(date) {
  return (date.getMonth() + 1).toString() + '/' + date.getDate().toString() + '/' + date.getFullYear().toString();
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div id="datepicker"></div>
</body>

</html>

答案 1 :(得分:0)

没有选项可以在datepicker中显示当前日期,但您可以在底部使用按钮转到当前日期。

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

点击此链接https://jqueryui.com/datepicker/#buttonbar