Different Browser and OS show a different date format on client side. Given the following markup:

<input data-drupal-selector="edit-field-date-end-value-date" title="Date (e.g. 2019-05-15)" type="date" min="1969-05-15" max="2069-05-15" data-drupal-date-format="Y-m-d" id="edit-field-date-end-value-date" name="field_date[end_value][date]" value="2019-05-11" size="12" class="form-date hasDatepicker">
  • In Chrome: dd/mm/yyyy
  • In Safari: yyyy-mm-dd

I think it's an issue with input type date, because it is showing as per browsers HTML5 or HTML4.

How can I solve this issue? So while load or if select from datepicker then it also solves? Do I maybe need to use Moment.js?



Actually the thing is type="date" is not supported by the Safari browser and moreover best practice is to use server time rather using JavaScript. Maybe the following code helps

var dateSTR = "2019-05-15";

var date = new Date(dateSTR.replace(/-/g,"/"));

console.log("0:" + new Date("2019-05-15"))
console.log("1:" + date)
console.log("2:" + date)
console.log("3:" + date);
console.log("4:" + date.toLocaleDateString()); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.