<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Description start -->
<div class="row">
<div class="col-xs-12 padding10 text-center">
<p></p>I created this bootstrap snippet as part of a calendar system I'm planning for Joomla K2.</p>
<p>The idea of this form is to ask the user if the event re-occurs, how often it re-occurs and the type of the re-occurence daily, weekly, monthly, yearly.</p>
<p>There are limits on the amount of gap between each type which change accordingly</p>
<ul class="list-unstyled"><li>31 days (max days in month)</li>
<li>52 weeks (weeks in year)</li>
<li>12 months (months in year)</li>
<li>and 20 years (time between Preston Guilds!)</li>
</ul>
<p>These can be altered to your own limits on javascript lines 60-71 as well as the text that goes after the "Every xx days/weeks/etc"</p>
<p>once the user edits the data it turns the data into a DateInterval code which it stores in hidden field recur_code</p>
<p>it also stores the mode in recur_mode - 0 = "no re-occurence", 1 = "re-occurence with end date", 2 = "re-occur forever"</p>
<p>The various options are automatically shown/hidden depending on user choices</p>
</div>
</div>
<!-- Description end -->
<form>
<input id="recur_mode" type="hidden" />
<input id="recur_code" type="hidden" />
<div id="reoccur" class="form-group row radioBtn">
<label class="col-md-4">Does this event re-occur?</label>
<div class="col-md-8">
<a class="btn btn-primary btn-sm active" data-active="yes" data-value="yes" data-info="recur reoccur indef recur_mode" >YES</a>
<a class="btn btn-primary btn-sm notActive" data-active="no" data-value="no" data-info="recur reoccur indef recur_mode" >NO</a>
</div>
</div>
<fieldset id="reoccur_option">
<legend>Re-occuring options</legend>
<div id="indef" class="form-group row radioBtn">
<label class="col-md-4">Does this event re-occur indefinitely?</label>
<div class="col-md-8">
<a class="yes btn btn-primary btn-sm active" data-active="yes" data-value="yes" data-info="recur reoccur indef recur_mode" >YES</a>
<a class="no btn btn-primary btn-sm notActive" data-active="no" data-value="no" data-info="recur reoccur indef recur_mode" >NO</a>
</div>
</div>
<div id="recur_end" class="form-group row">
<label class="col-md-4">Re-occur until</label>
<div class="col-md-8">
<input type="date" id="recur_date" />
</div>
</div>
<div id="period_type" class="form-group row">
<label class="col-md-4">Repeat</label>
<div class="col-md-8">
<a class="btn btn-primary btn-sm active" data-active="yes" data-value="D">Daily</a>
<a class="btn btn-primary btn-sm notActive" data-active="no" data-value="W">Weekly</a>
<a class="btn btn-primary btn-sm notActive" data-active="no" data-value="M">Monthly</a>
<a class="btn btn-primary btn-sm notActive" data-active="no" data-value="Y">Yearly</a>
<input type="hidden" id="period_type_val" value="D" />
</div>
</div>
<div id="period_skip" class="form-group row">
<label class="col-md-4">Every</label>
<div class="col-md-8">
<input type="number" min="1" max="31" value="1" />
<span class="period_text">days</span>
</div>
</div>
</fieldset>
</form>
</div>
