CODEWITHSUNDEEP
jqueryjquery-ui
Prasad Guduri
Prasad Guduri

Reputation: 125

Jquery Datepicker to display current date

I want to display the Today's date at the end of date picker as image attached.

$(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

Any configuration is available to achieve this ?

TIA

Upvotes: 2

Views: 3686

Answers (2)

K Scandrett
K Scandrett

Reputation: 16540

There's no option that I've found but you can of course make it look like it is a part of the picker:

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>

Upvotes: 2

Selvakumar
Selvakumar

Reputation: 537

There is no option to display current date in datepicker, but you can have button at bottom to go to current date.

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

Check this link https://jqueryui.com/datepicker/#buttonbar

Upvotes: 0

Related Questions