Datepicker Prototype in Lungo

by otupman

HTML

<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.brand.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/theme.lungo.css">
<script src="http://lungo.tapquo.com/example/components/quojs/quo.js"></script>
<script src="http://lungo.tapquo.com/example/components/lungo/lungo.js"></script>
<script src="https://gist.github.com/otupman/5142473/raw/312abc21effe77da453b2b406dbef87aa0544a0b/moment.js"></script>
<section id="main" > 
    <header data-title="JsFiddle Lungo">
        <nav class="left">
            <a data-icon="home"></a>
        </nav>
    </header>
    <article class="active" id="first_article">
        <strong>Simple Example</strong>
        <a href="#second_article" data-router="article">Second article</a>
        <br/>
        <a href="#second_section" data-router="section">Second section</a>
        <button id="calendarButton">Go!</button>
        
        <p>Date selected: <span class="center dateDisplay"></span></p>
        
        <div id="overlay" class="notification">
            <div class="window show">
                <div  id='dateWindow'></div>
                <p class="dateDisplay">[not selected]</p>
                <button id="doneButton">Done</button>  
            </div>
        </div>
        
    </article>
    <article id="second_article">
        <strong>Second article</strong>
        <a href="#first_article" data-router="article">First article</a>
        <br/>
        <a href="#second_section" data-router="section">Second section</a>
    </article>
</section>

<section id="second_section" data-transition="slide">
    <header data-title="Second page"></header>
    <article class="active">
        <a href="#back" data-router="section">Back</a>
    </article>
</section>

CSS

.other-month {
    font-color: grey
}

div.datePicker table {
    width: 100%;
}
div.datePicker table th {
    text-align: center;
    font-weight: bold;
}

div.datePicker table th,td {
    text-align: center;
    border: 1px solid black;
    margin: 1px;
}

JavaScript

Lungo.init({});

Lungo.dom('#overlay').hide(); // Cheating

var picker = null; // More cheating
Lungo.dom('#calendarButton').tap(function() {
    Lungo.dom('#overlay').show();
    
    picker = Centralway.datepicker({
        container: '#dateWindow'
        , callback: function(selectedDate) {
            console.log('Date selected (but slightly out):', moment(selectedDate).format(''));
            Lungo.dom('.dateDisplay').text(moment(selectedDate).format('MMMM Do YYYY, h:mm:ss a'));
        }
    });
});

Lungo.dom('#doneButton').tap(function() {
   Lungo.dom('#overlay').hide(); 
    picker.remove();
});

// And so, the picker begins

Centralway = {};
Centralway.datepicker = (function(Lungo) {
    var self = this;
    
    var _createControl = function() {
        self.pesudoRandomId = Math.random() + moment().valueOf();
        self.container = Lungo.dom('<div class="datePicker" id="'+self.peusdoRandomId+'"><strong><a data-icon="left" href="#" class="left"></a><span class="year-month-label"></span><a data-icon="right" href="#" class="right"></a><table></table></div>');
        self.documentContainer.append(self.container);
        self.prevMonthButton = self.container.find('a[data-icon="left"]');
        self.nextMonthButton = self.container.find('a[data-icon="right"]');
        self.monthYearDisplay = self.container.find('span[class="year-month-label"]');
    };
    
    var _getTable = function() { return self.container.find('table'); }
    
    var _update = function() {
        self.monthYearDisplay.text(self.date.format('MMMM YYYY'));
    };
    
    var _updateHeader = function() {
        var header = Lungo.dom('<tr></tr>');
        for(var i = 1; i <= 7; i++) {
            header.append('<th>' + moment().day(i).format('ddd') + '</th>');
        }
        _getTable().append('<thead></thead>').append(header);
    };

    var _daySelected = function(dayCell) {
        self.selectedDate = moment(dayCell.data('specificDate')); 
       ...