Jquery UI, use custom or specific date format

Question

I have two datepickers input in my form using Jquery UI's Datepicker. I need help formatting the date into my own specific format. I declared two variables for each datepicker's ID like this .datepicker({ dateFormat: 'dd/mmm/yyyy' }).val();, but looks like i'm doing it wrong.

var date2 = $('#datepicker2').datepicker({
  dateFormat: 'dd/mmm/yyyy'
}).val();
var date3 = $('#datepicker3').datepicker({
  dateFormat: 'dd/mmm/yyyy'
}).val();

$(function() {
  $("#datepicker2").datepicker();
});

$(function() {
  $("#datepicker3").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Input Data Date:
<input type="text" class="form-control" name="p2" id="datepicker2"><br> 
Birth Date:
<input type="text" class="form-control" name="p2" id="datepicker3"><br>

When i choose a date, what i got is mm/dd/yyy. Can anyone help me, please?

I created a snippet for you

mplungjan
– mplungjan

2018-02-01 06:49:02 +00:00
Commented Feb 1, 2018 at 6:49 — mplungjan
– mplungjan, Commented Feb 1, 2018 at 6:49
Thank you for the snipped, Mr. mplungjan .

Wira Xie
– Wira Xie

2018-02-01 06:50:22 +00:00
Commented Feb 1, 2018 at 6:50 — Wira Xie
– Wira Xie, Commented Feb 1, 2018 at 6:50
I did not change your code.

mplungjan
– mplungjan

2018-02-01 06:51:41 +00:00
Commented Feb 1, 2018 at 6:51 — mplungjan
– mplungjan, Commented Feb 1, 2018 at 6:51

mplungjan · Accepted Answer · 2018-02-01 06:58:46Z

1

You are not mentioning what your specific format is

You need to check formatDate

Here is an example

$(function() {
  $("#datepicker2").datepicker({
    onSelect: function(dateText) {
     console.log("Selected date: " + dateText + "; input's current value: " + 
     $.datepicker.formatDate("dd M yy", new Date(this.value)));
    }
  });
  $("#datepicker3").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: function(dateText) {
      console.log("Selected birth date: " + dateText + "; input's current value: " + this.value);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Input Data Date:
<input type="text" class="form-control" name="p2" id="datepicker2"><br> 
Birth Date:
<input type="text" class="form-control" name="p2" id="datepicker3"><br>

edited Feb 1, 2018 at 6:58

answered Feb 1, 2018 at 6:53

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wira Xie Over a year ago

Thanks for helping :D

Collectives™ on Stack Overflow

Jquery UI, use custom or specific date format

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related