En esta semana me he visto en la necesidad de trabajar unos detalles de un datepicker de bootstrap, que a mismo tiempo pueda controlar las fechas de selección, los rangos de días y el mínimo de día pero a su vez sea multiIdioma y bloqueos de días.

He utilizado las siguientes librerías:

bootstrap-daterangepicker DatePicker de Bootstrap que permite bloqueo de fechas y rangos.

MomentJS: viene incluido en bootstrap-daterangepicker.

DateJS: excelente librería de Js para manejar Fecha.

La implementacion esta con los comentarios entre lineas, en caso de querer bajar el proyecto de ejemplo MomentJsDateJs .

Aqui explicare directamente el codigo javascript, en el cual hago referencias a los elementos que estan definidos en el html del codigo de ejemplo.

$(document).ready(function () {
moment.lang('es');
var FieldFromDate = $('#finicio');
var FieldToDate = $('#ffin');
var valFromDate = {
startDate: moment(),
endDate: moment().add('days', 365),
minDate:moment(),
singleDatePicker: true,
format: 'L' };
var valToDate = {
startDate: moment().add('days',1),
endDate: moment().add('days', 365),
minDate: moment().add('days', 1),
singleDatePicker: true, format: 'L' };
FieldFromDate.daterangepicker(valFromDate);
FieldToDate.daterangepicker(valToDate);
FieldFromDate.on('apply', function (ev, picker){
var dinicio = new Date.parse($("#finicio").val());
var dfin = new Date.parse($("#ffin").val());
if(moment(dinicio).isAfter(dfin))
{
console.log('la fecha de inicio es mayor que la fecha final ');
FieldToDate.val(moment(dinicio).add('days',1).format('L'));
var valToDate = { startDate: moment(dinicio).add('days',1),
endDate: moment(dinicio).add('days', 30),
minDate: moment(dinicio).add('days', 1),
singleDatePicker: true, format: 'L' };
FieldToDate.daterangepicker(valToDate); }
if(moment(dinicio).isBefore(dfin)) {
console.log('la fecha de inicio es menor que la final'); }
 });
 });