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:
    assets/css/datepicker.css
    assets/js/date-time/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:
    assets/css/daterangepicker.css
    assets/js/date-time/moment.js
    assets/js/date-time/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:
    assets/css/bootstrap-timepicker.css
    assets/js/date-time/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
    })
    

Datetime picker

Fullcalendar

  • Full calendar plugin with drag & drop functionality.
    You can find more info here: http://fullcalendar.io/
  • To use it, you should include:
    assets/css/fullcalendar.css
    assets/js/jquery-ui.custom.js If you want external event drag & drop functionality.
    assets/js/date-time/moment.js
    assets/js/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'),