231 lines
6.4 KiB
HTML
231 lines
6.4 KiB
HTML
<section>
|
|
<h1 class="blue" data-id="#plugins/date-time"><i class="ace-icon fa fa-clock-o grey"></i> Date & Time</h1>
|
|
|
|
<div class="hr hr-double hr32"></div>
|
|
|
|
<!-- #section:plugins/date-time -->
|
|
<div class="help-content">
|
|
<h3 class="info-title smaller" data-id="#plugins/date-time.datepicker">Date picker</h3>
|
|
<!-- #section:plugins/date-time.datepicker -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Bootstrap date picker plugin.
|
|
<br />
|
|
You can find more info at its page:
|
|
<a href="http://eternicode.github.io/bootstrap-datepicker/">eternicode.github.io/bootstrap-datepicker/</a>
|
|
</li>
|
|
|
|
<li>
|
|
To use it, you should include:
|
|
<br />
|
|
<code>assets/css/bootstrap-datepicker.css</code>
|
|
<br />
|
|
<code>assets/js/date-time/bootstrap-datepicker.js</code>
|
|
</li>
|
|
|
|
<li>
|
|
It is also recommended to use browser's built-in datepicker if available,
|
|
which should be better especially on small touch devices:
|
|
<pre data-language="html">
|
|
<input type="date" name="mydate" id="mydate" />
|
|
</pre>
|
|
<pre data-language="javascript">
|
|
var mydate = $('#mydate')[0];
|
|
if(mydate.type !== 'date') {//if browser doesn't support "date" input
|
|
$(mydate).datepicker({
|
|
//options
|
|
})
|
|
}
|
|
</pre>
|
|
</li>
|
|
|
|
<li>
|
|
A basic example would be like this:
|
|
<pre data-language="javascript">
|
|
$('#my-date-picker-input').datepicker({
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
})
|
|
</pre>
|
|
</li>
|
|
|
|
<li>
|
|
You can also use the plugin as a daterange picker:
|
|
<pre data-language="html">
|
|
<div class="input-daterange input-group">
|
|
<input type="text" name="start" />
|
|
-
|
|
<input type="text" name="end" />
|
|
</div>
|
|
</pre>
|
|
<pre data-language="javascript">
|
|
$('.input-daterange').datepicker({autoclose:true});
|
|
</pre>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- /section:plugins/date-time.datepicker -->
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/date-time.daterangepicker">Daterange picker</h3>
|
|
<!-- #section:plugins/date-time.daterangepicker -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Bootstrap daterange picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
|
|
<br />
|
|
You can find more info at its page:
|
|
<a href="https://github.com/dangrossman/bootstrap-daterangepicker">https://github.com/dangrossman/bootstrap-daterangepicker</a>
|
|
</li>
|
|
|
|
<li>
|
|
To use it you should include:
|
|
<br />
|
|
<code>assets/css/daterangepicker.css</code>
|
|
<br />
|
|
<code>assets/js/date-time/moment.js</code>
|
|
<br />
|
|
<code>assets/js/date-time/daterangepicker.js</code>
|
|
</li>
|
|
|
|
<li>
|
|
For an example of daterangepicker i118n, see the example at
|
|
<code>examples/daterange.html</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /section:plugins/date-time.daterangepicker -->
|
|
|
|
|
|
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/date-time.timepicker">Time picker</h3>
|
|
<!-- #section:plugins/date-time.timepicker -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Bootstrap time picker plugin.
|
|
<br />
|
|
You can find more info at its page:
|
|
<a href="http://jdewit.github.io/bootstrap-timepicker/">jdewit.github.io/bootstrap-timepicker/</a>
|
|
</li>
|
|
|
|
<li>
|
|
To use it, you should include:
|
|
<br />
|
|
<code>assets/css/bootstrap-timepicker.css</code>
|
|
<br />
|
|
<code>assets/js/date-time/bootstrap-timepicker.js</code>
|
|
</li>
|
|
|
|
<li>
|
|
It is also recommended to use browser's built-in time picker if available,
|
|
which should be better especially on small touch devices:
|
|
<pre data-language="html">
|
|
<input type="date" name="mytime" id="mytime" />
|
|
</pre>
|
|
<pre data-language="javascript">
|
|
var mytime = $('#mytime')[0];
|
|
if(mytime.type !== 'time') {//if browser doesn't support "time" input
|
|
$(mytime).timepicker({
|
|
//options
|
|
})
|
|
}
|
|
</pre>
|
|
</li>
|
|
|
|
<li>
|
|
A basic example would be like this:
|
|
<pre data-language="javascript">
|
|
$('#timepicker1').timepicker({
|
|
minuteStep: 1,
|
|
showSeconds: true,
|
|
showMeridian: false
|
|
})
|
|
$('#timepicker1').timepicker('showWidget');//explicit call to display it whenever needed
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /section:plugins/date-time.timepicker -->
|
|
|
|
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/date-time.datetimepicker">Datetime picker</h3>
|
|
<!-- #section:plugins/date-time.datetimepicker -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Bootstrap datetime picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
|
|
<br />
|
|
You can find more info at its page:
|
|
<a href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a>
|
|
</li>
|
|
|
|
<li>
|
|
To use it you should include:
|
|
<br />
|
|
<code>assets/css/bootstrap-datetimepicker.css</code>
|
|
<br />
|
|
<code>assets/js/date-time/moment.js</code>
|
|
<br />
|
|
<code>assets/js/date-time/bootstrap-datetimepicker.js</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /section:plugins/date-time.datetimepicker -->
|
|
|
|
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/date-time.fullcalendar">Fullcalendar</h3>
|
|
<!-- #section:plugins/date-time.fullcalendar -->
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Full calendar plugin with drag & drop functionality.
|
|
<br />
|
|
You can find more info here:
|
|
<a href="http://fullcalendar.io/">http://fullcalendar.io/</a>
|
|
</li>
|
|
|
|
<li>
|
|
To use it, you should include:
|
|
<br />
|
|
<code>assets/css/fullcalendar.css</code>
|
|
<br />
|
|
<code>assets/js/jquery-ui.custom.js</code> If you want external event drag & drop functionality.
|
|
<br />
|
|
<code>assets/js/date-time/moment.js</code>
|
|
<br />
|
|
<code>assets/js/fullcalendar.js</code>
|
|
</li>
|
|
|
|
<li>
|
|
For an example, please see calendar's example page inside the template.
|
|
<br />
|
|
The Javascript code is located at:
|
|
<br />
|
|
<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>calendar.js</code>
|
|
</li>
|
|
|
|
<li>
|
|
It seems in its latest update, Fullcalendar has event resizing for events
|
|
with "yyyy-mm-dd" format only (not sure though)
|
|
<br />
|
|
For formatting you can use "moment.js" libary.
|
|
<pre data-language="javascript">
|
|
moment().format('YYYY-MM-DD'),
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /section:plugins/date-time.fullcalendar -->
|
|
|
|
</div>
|
|
<!-- /section:plugins/date-time -->
|
|
</section> |