CODEWITHSUNDEEP
javascriptphpjquerydatedatepicker
mevukpaul
mevukpaul

Reputation: 67

Changing DateFormat to European in Widget, jQuery Datepicker (issue!)

I'd really appreciate your help on this one. I am trying to make the check in/check out date shown in the input field of the following page European format (dd/mm/yy): https://numberonebandbstaustell.co.uk/rooms/tremayne/ (username: 'numberone' ; pass: 'num270514').

At the moment it shows in European when you first load the page because I have simply set the value of the input field by php in that way. The problem is, once you use the jquery datepicker widget/device it shows the date as month first.

I got into the script file calendar-script.js which you can see by inspecting the element (script type="text/javascript" src="https://numberonebandbstaustell.co.uk/wp-content/plugins/nation-booking/includes/js/calendar-script.js") and changed the dateFormat option on line 358 to "dd-mm-yy" but it doesn't seem to do anything!

I've seen on other related questions on here advice to add the dateFormat by stating it when the selector is fired but being a bit of a javascript newbie I can't see where its fired. The whole thing applies to an input field with a certain class (hasDatepicker).

I'm happy for the backend of the website to read it in the mm/dd/yy format - it seems to need to in order to work out the rooms availability on the next page (i.e. when the text field is in european format as it is on first load and you select book now it thinks the format was american anyway so it breaks the system) but it needs to show the user the european format in the input field.

Hope someone can help I'd really appreciate it :)

Upvotes: 1

Views: 2251

Answers (1)

prava
prava

Reputation: 3986

when you are using datepicker, please add one option as dateFormat like below:

// I used class selector here as example
$(".navbar-datepicker").datepicker({
    showOn: "button",
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd-mm-yy'   // dateFormat, only need to add this line extra in ur code
});

UPDATE:

I checked your code by checking the source JS code. In this file https://numberonebandbstaustell.co.uk/wp-content/themes/wpnation/js/allscript.js, the following code is present:

Check Out Date

$("#resend-step2 #check-out-date, .step1 #check-out-date, .room-content-description #check-out-date").datepicker({
    nextText: '<span class="icon-chevron-sign-right"></span>',
    prevText: '<span class="icon-chevron-sign-left"></span>',
    minDate: dateToday,
    beforeShow: function(input, inst) {
        $('#ui-datepicker-div').addClass('resend-datepicker');
    }
});

Please change to :

$("#resend-step2 #check-out-date, .step1 #check-out-date, .room-content-description #check-out-date").datepicker({
    nextText: '<span class="icon-chevron-sign-right"></span>',
    prevText: '<span class="icon-chevron-sign-left"></span>',
    minDate: dateToday,
    beforeShow: function(input, inst) {
        $('#ui-datepicker-div').addClass('resend-datepicker');
    },
    dateFormat: 'dd-mm-yy'
});

Check In Date

$("#resend-step2 #check-in-date, .step1 #check-in-date, .room-content-description #check-in-date").datepicker({
    nextText: '<span class="icon-chevron-sign-right"></span>',
    prevText: '<span class="icon-chevron-sign-left"></span>',
    minDate: dateToday,
    beforeShow: function(input, inst) {
        $('#ui-datepicker-div').addClass('resend-datepicker');
    }
});

Please change to :

$("#resend-step2 #check-in-date, .step1 #check-in-date, .room-content-description #check-in-date").datepicker({
    nextText: '<span class="icon-chevron-sign-right"></span>',
    prevText: '<span class="icon-chevron-sign-left"></span>',
    minDate: dateToday,
    beforeShow: function(input, inst) {
        $('#ui-datepicker-div').addClass('resend-datepicker');
    },
    dateFormat: 'dd-mm-yy'
});

Upvotes: 1

Related Questions