---
title: Home
---
{% include doc_head.html %}
<div class="container" role="main">

	<div class="row">
		<div class="col-md-4">
			<ul class="list-group">
				<li class="list-group-item list-group-item-info">Documentaion</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}doc/">Main Documentation</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}faq/">Frequently Asked Questions</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}api/">API &amp; Options Documentation</a>
				</li>
				<li class="list-group-item list-group-item-info">Download</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}theme/bootstrap">Bootstrap Theme Builder</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}theme/jqm">jQueryMobile Theme Builder</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}theme/jqueryui">jQueryUI Theme Builder</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="{{ site.basesite }}builder/">Download Builder</a>
				</li>
				<li class="list-group-item list-group-item-info">Support</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="https://github.com/jtsage/jquery-mobile-datebox">GitHub Source</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="http://dev.jtsage.com/forums/">Support Forums</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="http://crowdin.net/project/jquery-mobile-datebox">i18n Project</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="mailto:jtsage+datebox@gmail.com">Contact</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="http://jquerymobile.com/">jQueryMobile Homepage</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="http://getbootstrap.com/">Bootstrap Homepage</a>
				</li>
				<li class="list-group-item">
					<span class="glyphicon glyphicon-chevron-right pull-right"></span>
					<a href="http://jqueryui.com/">jQueryUI Homepage</a>
				</li>
			</ul> 
		</div>
		
		<div class="col-md-8"> 
			<div class="alert alert-info">DateBox is a jQueryMobile / Bootstrap / jQueryUI plugin that aims to make user interaction with dates and times simple and intuitive. It is a collaborative work, with a full range of features allowing easy implementation, and painless extensibility. New to version 4 is the inclusion of Bootstrap and jQueryUI operation, along with a new build system that makes adding the framework of your choice as easy as possible.</div> 

			<div class="alert alert-warning">Upgrade Note: DateBox4 is backwards compatible with jQM-DateBox, however the namespace for the widget has changed.  Any references in your own code to mobile.datebox or mobile-datebox must be updated to jtsage.datebox or jtsage-datebox.</div> 

			<h2>General Look and Feel</h2>
			
			<div class="form-group">
				<label for="mode1">CalBox</label>
				<input name="mode1" class="form-control" id="mode1" type="text" data-role="datebox" data-options='{"mode":"calbox"}' />
			</div><div class="form-group">
				<label for="mode2">DateBox</label>
				<input name="mode2" class="form-control" id="mode2" type="text" data-role="datebox" data-options='{"mode":"datebox"}' />
			</div><div class="form-group">
				<label for="mode9">TimeBox</label>
				<input name="mode9" class="form-control" id="mode9" type="text" data-role="datebox" data-options='{"mode":"timebox"}' />
			</div><div class="form-group">
				<label for="mode5">DurationBox</label>
				<input name="mode5" class="form-control" id="mode5" type="text" data-role="datebox" data-options='{"mode":"durationbox"}' />
			</div><div class="form-group">
				<label for="mode3">FlipBox</label>
				<input name="mode3" class="form-control" id="mode3" type="text" data-role="datebox" data-options='{"mode":"flipbox"}' />
			</div><div class="form-group">
				<label for="mode7">TimeFlipBox</label>
				<input name="mode7" class="form-control" id="mode7" type="text" data-role="datebox" data-options='{"mode":"timeflipbox"}' />
			</div><div class="form-group">
				<label for="mode6">DurationFlipBox</label>
				<input name="mode6" class="form-control" id="mode6" type="text" data-role="datebox" data-options='{"mode":"durationflipbox"}' />
			</div><div class="form-group">
				<label for="mode4">SlideBox</label>
				<input name="mode4" class="form-control" id="mode4" type="text" data-role="datebox" data-options='{"mode":"slidebox"}' />
			</div>
		</div> 
	</div>
	
</div>
{% include bs_footer.html api="true" %}