Date & Time

Date picker

  • Bootstrap date picker plugin.
    You can find more info at its page: eternicode.github.io/bootstrap-datepicker/
  • To use it, you should include:
    components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css
    components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js
  • It is also recommended to use browser's built-in datepicker if available, which should be better especially on small touch devices: 
     

     var mydate = $('#mydate')[0];
 if(mydate.type !== 'date') {//if browser doesn't support "date" input
    $(mydate).datepicker({
      //options
    })
 }
  • A basic example would be like this: 
    $('#my-date-picker-input').datepicker({
   autoclose: true,
   todayHighlight: true
})
  • You can also use the plugin as a daterange picker: 
    
  
  -
  

    

     $('.input-daterange').datepicker({autoclose:true});

Daterange picker

  • Bootstrap daterange picker plugin which uses moment.js.
    You can find more info at its page: https://github.com/dangrossman/bootstrap-daterangepicker
  • To use it you should include:
    components/bootstrap-daterangepicker/daterangepicker.css
    components/moment/moment.js
    components/bootstrap-daterangepicker/daterangepicker.js
  • For an example of daterangepicker i118n, see the example at examples/daterange.html

Time picker

  • Bootstrap time picker plugin.
    You can find more info at its page: jdewit.github.io/bootstrap-timepicker/
  • To use it, you should include:
    components/bootstrap-timepicker/css/bootstrap-timepicker.css
    components/bootstrap-timepicker/js/bootstrap-timepicker.js
  • It is also recommended to use browser's built-in time picker if available, which should be better especially on small touch devices: 
     

     var mytime = $('#mytime')[0];
 if(mytime.type !== 'time') {//if browser doesn't support "time" input
    $(mytime).timepicker({
      //options
    })
 }
  • A basic example would be like this: 
    $('#timepicker1').timepicker({
    minuteStep: 1,
    showSeconds: true,
    showMeridian: false
})
$('#timepicker1').timepicker('showWidget');//explicit call to display it whenever needed

Datetime picker

  • Bootstrap datetime picker plugin which uses moment.js.
    You can find more info at its page: https://github.com/Eonasdan/bootstrap-datetimepicker
  • To use it you should include:
    components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css
    components/moment/moment.js
    components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js

Fullcalendar

  • Full calendar plugin with drag & drop functionality.
    You can find more info here: http://fullcalendar.io/
  • To use it, you should include:
    components/fullcalendar/dist/fullcalendar.css
    components/_mod/jquery-ui.custom/jquery-ui.custom.js If you want external event drag & drop functionality.
    components/moment/moment.js
    components/fullcalendar/dist/fullcalendar.js
  • For an example, please see calendar's example page inside the template.
    The Javascript code is located at:
    mustache/app/views/assets/scripts/calendar.js
  • It seems in its latest update, Fullcalendar has event resizing for events with "yyyy-mm-dd" format only (not sure though)
    For formatting you can use "moment.js" libary. 
     moment().format('YYYY-MM-DD'),