Adding a "close" button to the Pikaday datepicker

Found it online, really like, but neither their github nor any other documentation I looked through has an option for a close button. I understand it's a bit of work, but maybe someone can tackle this. Currently the calendar closes if you click outside of it.

https://jsfiddle.net/kjm98yfu/3/

I tried to post that long js file here, but it wouldn't let me (too many characters).

 

I guess anyone deserves to look at its GitHub too:
https://github.com/dbushell/Pikaday

My best attempt is as follows (js):

var picker = new Pikaday(
    {
        field: document.getElementById('datepicker'),
        firstDay: 1,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [2000,2020],
                onDraw: function(){
                    var prevButt = this.el.querySelector('.pika-prev');
                    prevButt.parentNode.insertBefore(myButt, prevButt);
                }
    }),
    myButt = document.createElement('div'), 
    el;

myButt.id = 'myButt';
myButt.className = 'pika-label';
el = myButt.appendChild(document.createElement('button'));
el.type= 'button';
el.appendChild(document.createTextNode('x'));
myButt.addEventListener('click', function(){
    picker.hide();
}, false);

Code (JavaScript):

Some CSS for styling:

#myButt button{
    /* ... */   
}

Code (CSS):

 

Hey! Thank you for all your hard work. I had to add a new class .pika-new to get that button where I wanted it to be, but overall it's what I wanted:

https://jsfiddle.net/kjm98yfu/48/

 

Hehe,
That's something I couldn't do due to sudden headache I've been having since morning.
Congrats on figuring out that by yourself

 

But... Why would you need a close button? It closes when you click outside it?

 

It's for people like me who will intuitively spend the 1st 3 seconds looking for a close button by the time the popup was opened. Right, Qwikad?

That's quite logical you know? The calendar is part of the textbox so when you click the close button (which is a part of calendar) then textbox should get the focus. But maybe you can force it to focus on body instead. Try to add one line below after picker.hide():

document.body.focus(); //or perhaps document.documentElement.focus() ?

Code (JavaScript):

 

By the way there was a bug in the original Pikaday js file that was addressed on their github page. The bug prevented the calendar to close on ipads and some other mobile devices. I updated the file. Secondly, I had to add this to the "new Pikaday" js for the close button to work on ipads:

myButt.addEventListener('touchend', function() {
  picker.hide();
}, false);

Code (markup):

Here is the version that works on all devices:

https://jsfiddle.net/kjm98yfu/50/