1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Adding a "close" button to the Pikaday datepicker

Discussion in 'JavaScript' started by qwikad.com, Sep 6, 2016.

  1. #1
    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.
    SEMrush
    https://jsfiddle.net/kjm98yfu/3/

    I tried to post that long js file here, but it wouldn't let me (too many characters).
     
    Solved! View solution.
    qwikad.com, Sep 6, 2016 IP
    SEMrush
  2. #2
    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):
     
    hdewantara, Sep 6, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,021
    Likes Received:
    1,597
    Best Answers:
    27
    Trophy Points:
    475
    #3
    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/
     
    qwikad.com, Sep 7, 2016 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    519
    Likes Received:
    47
    Best Answers:
    23
    Trophy Points:
    130
    #4
    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 :)
     
    hdewantara, Sep 7, 2016 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    But... Why would you need a close button? It closes when you click outside it?
     
    PoPSiCLe, Sep 7, 2016 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    519
    Likes Received:
    47
    Best Answers:
    23
    Trophy Points:
    130
    #6
    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):
     
    Last edited: Sep 7, 2016
    hdewantara, Sep 7, 2016 IP
    qwikad.com likes this.
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,021
    Likes Received:
    1,597
    Best Answers:
    27
    Trophy Points:
    475
    #7
    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/
     
    qwikad.com, Sep 8, 2016 IP