The default Magento date-picker format for birth-date on create account page is mm/dd/yyyy. how can i change it into dd/mm/yyyy format in Magento 2.3
Magento – Changing Default magento 2.3 datepicker format
datepickermagento2
Related Solutions
you can use the magento 2 datepicker. It use the jquery_ui datepicker.
Try this in your phtml:
<script type="text/javascript">
require([
"jquery",
"mage/calendar"
], function($){
$('#datepicker').datepicker({
prevText: '<zurück', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Vor>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
showMonthAfterYear: false,
dateFormat:'d.m.yy'
}
);
});
</script>
Example with form:
<div class="field col-sm-6 ">
<div class="response-field-date">
<div class="subtemplate-wrapper">
<label for="" style="" class="">Terminwunsch</label>
<div class="row">
<div class="input-box col-sm-12">
<input name="terminwunsch" id="datepicker" title="Terminwunsch" value="" type="text">
<script type="text/javascript">
require([
"jquery",
"mage/calendar"
], function($){
$('#datepicker').datepicker({
prevText: '<zurück', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Vor>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
showMonthAfterYear: false,
dateFormat:'d.m.yy'
}
);
});
</script>
</div>
</div>
</div>
</div>
</div>
To make your code working you have to write below code in your ".js" file.
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var $el = $(element);
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$el.datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function() {
var observable = valueAccessor();
observable($el.datepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.datepicker("destroy");
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element),
current = $el.datepicker("getDate");
if (value - current !== 0) {
$el.datepicker("setDate", value);
}
}
};
return Component.extend({
//....
dob: ko.observable(new Date())
//....
});
Reference from: http://jsfiddle.net/rniemeyer/NAgNV/
Best Answer
Datepicker format is via customizations of the widget of the datepicker from jQuery UI. Check the DOB template and see how that's being triggered, if I am not wrong, they hardcode it via PHP block rendering. If I were you, I'll override the template and create a newer input field with the new call to the javascript widget so you can actually customize it.
Here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_calendar.html
For more information about the base of it: https://api.jqueryui.com/datepicker/
You have the parameters to set it. If you check here you will see the whole specs of the custom Magento widget: https://github.com/magento/magento2/blob/2.3/lib/web/mage/calendar.js
PS. I personally bring a third-party datepicker library because I don't like the basics from jQuery UI. This is my favorite: http://www.daterangepicker.com/