Date picker for web component [closed]

Question

I'm trying to find a date picker for my custom web component.

I've found Pikaday, which works outside of SF, but inside SF it loads fine, but when I click on the date field the calendar flashes up and disappears.

If I alt tab out and back into chrome the calender appears and I can use it. Very strange.

I've believe I've integrated it correctly as per instructions of Pikaday site and followed the integration into SF as a static resource. Check my homework.

I've used other libraries without a problem. Can anyone share a working reference?

I wonder if it is a CSS issue, but cannot fathom it.

Code of the webcomponent is here:

Template

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
        <input type="text" class="date-picker" lwc:dom="manual"></input>
    </div>
    </lightning-card>
</template>

JS class

import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import Pika from '@salesforce/resourceUrl/Pikaday';

export default class CreateEvent extends LightningElement {

    changeHandler(event) {
        this.greeting = event.target.value;
    }

    pikaInitialized = false;

    renderedCallback() {
        if (this.pikaInitialized) {
            return;
        }
        this.pikaInitialized = true;

        Promise.all([
            loadScript(this, Pika + '/Pikaday-master/pikaday.js'),
            loadStyle(this, Pika + '/Pikaday-master/css/site.css'),
            loadStyle(this,Pika + '/Pikaday-master/css/pikaday.css'),


        ])
            .then(() => {
                this.initializePikaday();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading Pika',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }

    initializePikaday() {
        const field = this.template.querySelector('.date-picker');

        // eslint-disable-next-line
        var picker = new Pikaday({
            field: field,
            pickWholeWeek: true,
            onSelect: function (date) {
                var sundayDate = date.getDate() - date.getDay();
                var sunday = new Date(date.setDate(sundayDate));
                var saturday = new Date(date.setDate(sundayDate + 6));
                field.value = sunday.toLocaleDateString() + ' - ' + saturday.toLocaleDateString();
            }
        });

    }
}