Question 10741 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

input type date format should be 12-mar-23 even if user type 12-03-23 – Jquery

(function() {
    $('#submit').on('click', function(){
      var date = new Date($('#date-input').val());
      day = date.getDate();
      month = date.getMonth() + 1;
      year = date.getFullYear();
      alert([day, month, year].join('/'));
    });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date-input" required />
<button id="submit">Submit</button>

In input date, format should be 01-mar-23 even if the user type in this format 01-03-23

The required format be 01-mar-23

Tags:

3

Answers


  1. 0

    You can use this Format for a date to convert month to string

    var date = new Date($('#date-input').val());
    const day = date.getDate().toString().padStart(2, '0');
    const month = date.toLocaleString('default', { month: 'short' }).toLowerCase();
    const year = date.getFullYear().toString().substr(-2);
    const formattedDate = `${day}-${month}-${year}`;
    console.log(formattedDate); // Output: "01-mar-23"
    Login or Signup to reply.
  2. 0

    You can also get the month name in your date format like this,

    const monthNames = [
  "jan", "feb", "mar", "apr", 
  "May", "jun", "jul", "aug", 
  "sept", "oct", "nov", "dec"
];

(function() {
  $('#submit').on('click', function() {
    var d = new Date($('#date-input').val());

    alert([String(d.getDate()).padStart(2, '0'), monthNames[d.getMonth()], d.getFullYear().toString().substr(-2)].join('-'));
  });
})();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date-input" required />
<button id="submit">Submit</button>
    Login or Signup to reply.
  3. 0

    The date with month in string format you are asking for is not supported in browser native datepickers.

    Although, you can achieve the format you need by seperating the day, month and year in 3 select boxes, where user can select from the month dropdown, and in that we can pass options according to our requirement like,

    • 1st option (January, Jan, jan, 1, etc…)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search