X-Editable Datetime Picker

by Felipe Zura

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/bootstrap-datetimepicker/css/datetimepicker.css">
<script src="http://momentjs.com/downloads/moment.js"></script>
<br />
<br />
<br />
<br />
<h1>X-Editable Datetime Picker</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<p> Click the datetime to edit. Saving doesn't actually work, as this is only to demonstrate
the datetime picker options. </p>
Datetime: <a href="#" id="datetime" data-type="datetime" data-pk="1" data-url="/post" title="Select date, then hour, then minute">04/14/2014 12:45</a>
<br />
<h1>X-Editable Combodate</h1>
<p>
    Combodate has an option to turn rounding on/off. Here, round is turned off but the minute step is still 5, meaning the dropdown for minutes is <b>not pre-populated</b>. 
</p>
Combodate 1: <a href="#" id="combodate" data-type="combodate" data-pk="1" data-url="/post" title="Select date" data-roundTime=false>07/30/2014 04:43 PM</a>
<br />
<br />
<p>
    This combodate has minute steps of 1, meaning the minutes <b>are pre-populated</b>.
</p>
Combodate 2: <a href="#" id="combodate2" data-type="combodate" data-pk="1" data-url="/post" title="Select date" data-roundTime=false>07/30/2014 04:43 PM</a>

JavaScript

$(function(){
    $.fn.editable.defaults.mode = 'popup';
    
    $("#datetime").editable({
        format: 'mm/dd/yyyy',
        placement: 'right',
        datetimepicker: {
            todayHighlight: true,
            showMeridian: true,
            minuteStep: 1    
        }
    });
    
    $("#combodate").editable({
        template: 'MM / DD / YYYY    hh : mm A',
        format: 'MM/DD/YYYY hh:mm A',
        viewformat: 'MM/DD/YYYY hh:mm A',
        mode: 'inline',
        combodate:{
            showbuttons: true,
            roundTime: false,
            smartDays: true
        }      
    });
    
    $("#combodate2").editable({
        template: 'MM / DD / YYYY    hh : mm A',
        format: 'MM/DD/YYYY hh:mm A',
        viewformat: 'MM/DD/YYYY hh:mm A',
        mode: 'inline',
        combodate:{
            showbuttons: true,
            roundTime: false,
            smartDays: true,
            minuteStep: 1,
            maxYear:2019
        }      
    });
});