Magento – Magento2 – how to configure a widget calendar

I have used the spanish calender in magento

Try this codes

jQuery

jQuery(function($){
$.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '<Ant',
    nextText: 'Sig>',
    currentText: 'Hoy',
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
    'Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    yearRange:"1950:2050",
    changeYear:true,
    changeMonth:true,
    showMonthAfterYear: false,
    yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);});

In Phtml page i have added this codes

<input type="text" value="01/01/1970"class="input-text validate-age-below-18"   id="datepicker"/></p>                                                                       jQuery(function() {
jQuery.datepicker.setDefaults( jQuery.datepicker.regional[ "" ] );
jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "es" ] );

});

Hope it will work for you too

Simply add data bind to input field following way.

<input data-bind="datepicker: true" />

Change js code for Learning/AdditionalShippingBlock/view/frontend/web/js/view/checkout/shipping/additional-block.js

define([
    'jquery',
    "underscore",
    'ko',
    'uiComponent',
    'mage/calendar'
], function ($, _, ko, Component, calendar) {
    'use strict';
    var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
    return Component.extend({
        defaults: {
            template: 'Learning_AdditionalShippingBlock/checkout/shipping/additional-block'
        },
        initialize: function () {
            this._super();
            ko.bindingHandlers.datepicker = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);


                //initialize datepicker with some optional options
                var options = { minDate: 0
                };
                $el.datepicker(options);

                var writable = valueAccessor();
                if (!ko.isObservable(writable)) {
                    var propWriters = allBindingsAccessor()._ko_property_writers;
                    if (propWriters && propWriters.datepicker) {
                        writable = propWriters.datepicker;
                    } else {
                        return;
                    }
                }
                writable($(element).datepicker("getDate"));

            },
            update: function(element, valueAccessor)   {
                var widget = $(element).data("DateTimePicker");
                //when the view model is updated, update the widget
                if (widget) {
                    var date = ko.utils.unwrapObservable(valueAccessor());
                    widget.date(date);
                }
            }
        };

        return this;
    },
    canVisibleBlock: show_hide_custom_blockConfig
});

});