# 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

- 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:
  `assets/css/bootstrap-datetimepicker.css`
  `assets/js/date-time/moment.js`
  `assets/js/date-time/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:
  `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'),