daterangepicker demo

You should add basic stylesheet first, for focus (such as orange) and active (such as blue) items.

.drp-day-number.focus {color: #fff; background-color: #ed5434;}
.drp-day-number.active {color: #fff; background-color: #8cace2;}

date-single-picker

var configs1 = {
  lang: 'zh-cn',
  numberOfCalendars: 1,
  type: 'single',
  time: true,
  date: moment('2015-10-01'),
  onSelect: function(date) {
    // ...
  }
}
var drp1 = new DateRangePicker(el1, configs1);

date-range-picker

var configs2 = {
  lang: 'en',
  numberOfCalendars: 2,
  type: 'range',
  time: true,
  date: moment.range(['2015-10-01', '2015-10-04']),
  onSelect: function(date) {
    // ...
  }
}
var drp2 = new DateRangePicker(el2, configs2);

date-terminal-picker

var configs3 = {
  lang: 'fr',
  numberOfCalendars: 3,
  type: 'terminal',
  range: moment.range(['2015-10-03', '2015-10-07']),
  onSelect: function(date) {
    // ...
  }
}
var drp3 = new DateRangePicker(el3, configs3);