Using Custom JS for magento 2 KO datepicker in checkout page error required field

Question

I tried to add a custom datepicker with custom js in my Magento 2 checkout for delivery date, the custom js datepicker is showing and when i click the date it fills the value, but when i click next to go to the payment method i got an error This is a required field.

the html file:

<input id="shipping_date" class="input-text" type="text" data-bind="
        event: {change: userChanges},
        hasFocus: focused,
        value: value, 
        datepicker: true,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            disabled: disabled
        }" readonly="true"/>
<div class="clearfix">
  <div id="cal1Container">
</div>

the js file:

define([
    'jquery',
    'ko',
    'Magento_Ui/js/form/element/abstract'
], function ($, ko, Component) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            var calendar = window.checkoutConfig.calendar;
            var storeId = window.checkout.storeId; 
            ko.bindingHandlers.datepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element); 

                    // custom DatePicker
                    YAHOO.namespace("shipping.calendar");
                    YAHOO.shipping.calendar.init = function() {
                        var options = {
                            mindate: calendar.first_day,
                            maxdate: calendar.last_day,
                            locale_weekdays: "1char",
                        };
                        YAHOO.shipping.calendar.cal1 = new YAHOO.widget.CalendarGroup(
                          "cal1",
                          "cal1Container", options,
                           {PAGES:2}
                        );  
                        var mySelectHandler = function(type,dateSelected,obj) {
                          var dates = dateSelected[0];
                                    var date = dates[0];
                                    var year = date[0], month = date[1], day = date[2];
                                    var date = year + "-" + month + "-" + day;
                                    document.getElementById('shipping_date').value = date;  
                        }; 

                             YAHOO.shipping.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.shipping.calendar.cal1, true);
                        YAHOO.shipping.calendar.cal1.render();
                    }

                    YAHOO.util.Event.onDOMReady(YAHOO.shipping.calendar.init); 
                    // end custom DatePicker

                } 
            };

            return this;
        }
    });
});