搜索验证后，日期格式设置为dd / mm / YY，返回Ymd

Question

I have an odd behaviour on a website I work on. The datepicker is set to dd/mm/yyyy and works fine on one of the pages displaying results, but on the other one, after submiting and the page getting refreshed, it changes the format displayed to ymd. I'm using foundation datepicker plugin on a Phalcon/php built website. Have you met this issue before ? Any leads ? thanks !

"use strict";

$(function(){

    // Datepicker
    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    var datepickerCommonOptions = {
        language: "fr",
        format: "dd/mm/yyyy",
        leftArrow: "<",
        rightArrow: ">"
    };

    //CODE INITIALIZING ON THE PAGE ON WHICH IT CHANGES DATE FORMAT

    // Field used on the calendar view.
    var dateFromFilter = $("#dateFromFilter")
    .fdatepicker($.extend({}, datepickerCommonOptions, {
        onRender: function(date) {
            return date.valueOf() < now.valueOf() ? "disabled" : "";
        }
    }))
    .on("changeDate", function(ev) {
        if (ev.date.valueOf() > dateToFilter.date.valueOf()) {
            var newDate = new Date(ev.date);
            newDate.setDate(newDate.getDate() + 1);
            dateToFilter.update(newDate);
        }
        dateFromFilter.hide();
        $("#dateToFilter")[0].focus();
    })
    .data("datepicker");

    // Field used on the calendar view.
    var dateToFilter = $("#dateToFilter")
    .fdatepicker($.extend({}, datepickerCommonOptions, {
        onRender: function (date) {
            return date.valueOf() <= dateFromFilter.date.valueOf() ? "disabled" : "";
        }
    }))
    .on("changeDate", function() {
        dateToFilter.hide();
    })
    .data("datepicker");


    //CODE INITIALIZING ON THE PAGE ON WHICH EVERYTHINK WORKS FINE

    // Field used on the sales results view
    var dateFromFilterUnlimited = $("#dateFromFilter.unlimitedDateFilter")
    .fdatepicker($.extend({}, datepickerCommonOptions))
    .on("changeDate", function(ev) {
        if (ev.date.valueOf() > dateToFilter.date.valueOf()) {
            var newDate = new Date(ev.date);
            newDate.setDate(newDate.getDate() + 1);
            dateToFilter.update(newDate);
        }
        dateFromFilterUnlimited.hide();
        $("#dateToFilter")[0].focus();
    })
    .data("datepicker");

    // Field working with the dateFrom used on the calendar view.
    var dateToFilterUnlimited = $("#dateToFilter.unlimitedDateFilter")
    .fdatepicker($.extend({}, datepickerCommonOptions, {
        onRender: function (date) {
            return date.valueOf() <= dateFromFilterUnlimited.date.valueOf() ? "disabled" : "";
        }
    }))
    .on("changeDate", function() {
        dateToFilterUnlimited.hide();
    })
    .data("datepicker");
});

Answer 1

If you use type="date" then input value will always be formated like Ymd .
Visually it will depend on both platform and browser but in the end value will use Ymd format.
And datepicker will work with this with errors.

You have 2 solutions:

1. Remove datepicker and just rely on the browser's default input rendering and manually calculate Ymd format.
2. Change type to text , so datepicker will work fine.

Check these manuals for more info and examples:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

https://www.w3schools.com/html/html_form_input_types.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date