How to change the format of JQuery Date Picker to MM/DD/YYYY

Question

Based on this link

This where I will go if i wanna change my date format

defaults: {
    formatDate: function(date) {
        var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
        return formatted;
    },
    parseDate: function(string) {
        var date = new Date();
        var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
        if ( parts && parts.length == 4 ) {
            date = new Date( parts[3], parts[2] - 1, parts[1] );
        }
        return date;
    },
    selectDate: function(date) {
        return true;
    },
    limitCenturies: true,
    closeOnPick: true,
    appendTo: null
},

How can I make this to MM/DD/YYYY? I tried everything I change it but when Im selecting dates the value goes on different dates

Here is the error

Check this: https://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format — webta.st.ic, Feb 28 '18 at 13:02

cabrerahector · Accepted Answer · 2018-02-28T14:06:31.407

1

According to the documentation, this should work:

    defaults: {
        formatDate: function(date) {
    //var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' +  date.getFullYear();
            var formatted = $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + $.datePicker.utils.pad(date.getDate(), 2) + '/' + date.getFullYear();

            return formatted;
        },
        parseDate: function(string) {
            var date = new Date();

            if ( string ) {
                formatted_date = string.split('/');
                date = new Date( formatted_date[2], formatted_date[0] - 1, formatted_date[1] );
            }

            return date;
        },
        selectDate: function(date) {
            return true;
        },
        limitCenturies: true,
        closeOnPick: true,
        appendTo: null
    }

See it in action: Demo.

edited Feb 28 '18 at 14:06

answered Feb 28 '18 at 13:17

cabrerahector

3,653
4
16
27

this one work and i tried it but everytime i select a date and another the days are moving for example I click the date today the next time I will click another the value of calendar turns to April 2,2020 i will add an image for you to see – Nardong Bagsik Feb 28 '18 at 13:20
Try creating a [JSFiddle](https://jsfiddle.net/) of your code so we can see it in action. It'll be more helpful than seeing images. – cabrerahector Feb 28 '18 at 13:24
try this sir sorry if it is not tidy --> https://jsfiddle.net/hc0btwzj/1/ – Nardong Bagsik Feb 28 '18 at 13:30
sir based on your jsfiddle everytime i select a date the month increases by 1 – Nardong Bagsik Feb 28 '18 at 13:53
Sorry, you're right. I've updated the code again to fix that, @NardongBagsik – cabrerahector Feb 28 '18 at 14:03

score 0 · Answer 2 · answered Feb 28 '18 at 13:04

0

Try this out

var date = new Date('2014-01-06');
var newDate = date.toString('dd-MM-yy');

answered Feb 28 '18 at 13:04

joepil

51
1
12

`new Date().toString()` don't take any parameters. No need to pass that string. – Shubham Feb 28 '18 at 13:08
var date = new Date('dd-mm-yy') – joepil Feb 28 '18 at 13:13
I am talking about toString method. – Shubham Feb 28 '18 at 13:18

How to change the format of JQuery Date Picker to MM/DD/YYYY

2 Answers2