disable future dates in angular-bootstrap-datetimepicker

Question

I am unable to disable future dates.

<datetimepicker data-ng-model="user.join_date" data-datetimepicker-config="{ startView:'day', minView:'day' }"    />

Tried adding this.future = false; inside DateObject() of directive without any success...

EDIT

Found that I can use before-render and then make selectable=false; for future dates.

Trying to implement.

Thanks for any help!

Fahad Khan · Accepted Answer · 2015-11-17 19:28:33Z

1

Done it.

Used beforeRender function and disable future dates comparing utcDateValue with current date.

Here is the code:

$scope.beforeRender = function ($dates) {
    /* disable future dates */
    for(var i=0; i<$dates.length;i++) {
       if(new Date().getTime() < $dates[i].utcDateValue) {
          $dates[i].selectable = false;
       }
    }                
};

Added data-before-render="beforeRender($dates)" as well

<datetimepicker data-ng-model="user.join_date" data-datetimepicker-config="{ startView:'day', minView:'day' }" data-before-render="beforeRender($dates)" />

edited Nov 17, 2015 at 19:28

answered Nov 17, 2015 at 6:28

Fahad Khan

1,6354 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vespucci75fr · Accepted Answer · 2018-01-16 10:38:11Z

Allow only future

I needed the exact opposite requirement that is slightly more complicated, to allow only future date you need to consider the argument $view

Javascript:

$scope.futureOnlyBeforeRender = function($view, $dates) {
// $view values: year, month, day, hour, minute
var currentDate = new Date();
// set the current date according to the view
switch($view){
    case 'year': currentDate.setYear(currentDate.getYear() - 1); break;
    case 'month': currentDate.setMonth(currentDate.getMonth() - 1); break;
    case 'day': currentDate.setDate(currentDate.getDate() - 1); break;
    case 'hour': currentDate.setHours(currentDate.getHours() - 1); break;
    case 'minute': currentDate.setMinutes(currentDate.getMinutes() - 1); break;
}
// apply ot the dates
$dates.filter(function (date) {
    return date.utcDateValue < currentDate.getTime();
}).forEach(function (date) {
    date.selectable = false;
})

};

HTML:

data-before-render="futureOnlyBeforeRender($view, $dates)"

Collectives™ on Stack Overflow

disable future dates in angular-bootstrap-datetimepicker

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related