<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/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 }) </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>