0

hi guys how can i get the month day and year only in a datepicker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        var date = $(this).datepicker("getDate");
        $("#placeholder").text(date);
    });
});
  </script>

</head>
<body>
 <p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>

</body>
</html>

here is the output of the code above

got the code in here

http://jqueryui.com/datepicker/

enter image description here

Jeffrey
  • 103
  • 9

2 Answers2

2

There may be a way of doing this with getDate, but I think it will be easier to use the dataFormat option and just grab the value that datepicker spits out using .val()

Option 1
Here I am setting the format of the datepicker, getting the value and then reverting the format back to default.

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        var date = $(this).datepicker('option', 'dateFormat', 'MM dd, yy').val();
        $("#placeholder").text(date);
        $(this).datepicker('option', 'dateFormat', 'mm/dd/yy')
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>

Option 2 (Source: How to format a JavaScript date)

This approach is just formatting the date that is returned from the getData method.

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        function formatDate(date) {
          var monthNames = [
            "January", "February", "March",
            "April", "May", "June", "July",
            "August", "September", "October",
            "November", "December"
          ];

          var day = ("0" + date.getDate()).slice(-2);
          var monthIndex = date.getMonth();
          var year = date.getFullYear();

          return monthNames[monthIndex] + ' ' + day + ', ' + year;
        }
    
        var date = formatDate(new Date($(this).datepicker("getDate")));
        
        $("#placeholder").text(date);
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>
WizardCoder
  • 3,353
  • 9
  • 20
0

read the documentation of the plugin : http://api.jqueryui.com/datepicker/

Manta
  • 490
  • 5
  • 18