BigCommerce Example Checkout Field

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
//Add calander
<script src="https://unpkg.com/js-datepicker"></script>

//Add Calander script you want to use
<script>
//observe timmer to ensure element is present to add calander on after
    var obs = new MutationObserver(function(mutations, observer) {
      $.each(mutations, function(i, mutation) {
        var addedNodes = $(mutation.addedNodes);
        var selector = "form, .checkout-step-info";
        var filteredEls = addedNodes.find(selector).addBack(selector);
        //add calander or field
        filteredEls.each(function() {
                    $(
                      '<legend class="form-legend optimizedCheckout-headingSecondary">Enter Ship Date</legend>' +
                        '<input id="shipdate" type="text" name="shipdate"></input>'
                    ).insertAfter("#checkout-shipping-options");
        });
      });
    });
const config = { childList: true, subtree: true };

function addObserverIfDesiredNodeAvailable() {
    var composeBox = document.querySelectorAll(".checkout-step--shipping")[0];
    if(!composeBox) {
        //The node we need does not exist yet.  //Wait 500ms and try again
        window.setTimeout(addObserverIfDesiredNodeAvailable,500);
        return;
    }
    obs.observe($(".checkout-step--shipping")[0], config);
}

addObserverIfDesiredNodeAvailable();

//get value from custom field and pass through order comment
function getVals() {
  var  shipdate = $("#shipdate").val() ? $("#shipdate").val() : "",
    evt = createNewEvent("input"),
    input = document.querySelector('[name="orderComment"]');
  if (input) {
    if (shipdate) {
      setNativeValue(
        input,
        "shipdate: " + shipdate
      );
    }
    input.dispatchEvent(evt);
  }
}
function createNewEvent(eventName) {
  var event;
  if (typeof Event === "function") {
    event = new Event(eventName, { bubbles: true });
  } else {
    event = document.createEvent("Event");
    event.initEvent(eventName, true, true);
  }
  return event;
}
  $(document).on("keyup blur focusout", "#shipdate", function() {
    getVals();
  });

function setNativeValue(element, value) {
  var valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
  var prototype = Object.getPrototypeOf(element);
  var prototypeValueSetter = Object.getOwnPropertyDescriptor(
    prototype,
    "value"
  ).set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}
</script>