jQM clone DateBox

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
<script src="http://dev.jtsage.com/jQM-DateBox/js/doc.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.datebox.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.flipbox.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.slidebox.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.customflip.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/i18n/jqm-datebox.lang.utf8.js"></script>
<div id="templates">
    <div class="time-picker-template">
        <input class="time-input day-time-picker" type="text" data-role="datebox" data-options='{"mode":"timebox", "useNewStyle":true}' />
    </div>
</div>

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        <button id="btnAdd">Add timepicker from template</button>
        <div id="time-picker-block"></div>
        
        <button id="btnGet">Get All Dates</button>
    </div> 
</div>

CSS

#templates {
    display: none;
}

JavaScript

$(document).on("pagecreate","#page1", function(){ 
    
    $("#btnAdd").on("click", function(){
        var dayTimePicker = $("#templates .time-picker-template").clone();
        $("#time-picker-block").append(dayTimePicker).enhanceWithin();        
    });
    

    
        
    $("#btnGet").on("click", function(){
    
    	$('#time-picker-block .time-input').each(function (index, element) {
        	alert($(element).datebox('getTheDate'));
        });
    
    
    });



});