Salesforce: Override datepicker, implement Pikaday

CustomDatePicker.page

<!-- Static Resource: https://drive.google.com/file/d/1yZMzQMYkNa40JyRTOoQvMMLZg_bL-1F9/view?usp=sharing -->

<apex:page controller="Example">

    <link rel="stylesheet" href="{!URLFOR($Resource.FormsResource, '/pikaday/css/pikaday.css')}" />

    <apex:inputField styleClass="datepicks" value="{!Opp.StartDate}" />


    <script src="{!URLFOR($Resource.FormsResource, 'currency.js')}" ></script>
    <script src="{!URLFOR($Resource.FormsResource, '/moment/moment.js')}" ></script>
    <script src="{!URLFOR($Resource.FormsResource, '/pikaday/pikaday.js')}" ></script>
    
    <script>
        
        //remove sf dates from ui then kill its function (already broken) and replace with pikaday datepicker
        Array.from(document.querySelectorAll('.dateFormat')).forEach(el => 
            el.parentElement.removeChild(el) )

        if(DatePicker == "function"){
            DatePicker = () => console.log('using pikaday')
        }

        Array.from(document.querySelectorAll('.datepicks')).forEach(el => {
            new Pikaday({
                field: el,
                format: 'M/D/YYYY'
            })
            if(el.value){
                el.value = moment(el.value).format('M/D/YYYY')
            }
            el.onfocus = () => {}
        })
    </script>

</apex:page>