diosney / angular-bootstrap-datetimepicker-directive

A wrapper directive around the bootstrap-datetimepicker component.
MIT License
69 stars 50 forks source link

maxDate and minDate #5

Open tianxu0836 opened 9 years ago

tianxu0836 commented 9 years ago

How do you set minDate and maxDate?

rodrigosaling commented 9 years ago

@tianxu0836 I am afraid that the the current version does not allow this. So I copied the code from http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers and modified to use with my input fields:

<script type="text/javascript">
    $(function () {
        $('#period-from').on('dp.change', function (e) {
            $('#period-to').data('DateTimePicker').minDate(e.date);
        });
        $('#period-to').on('dp.change', function (e) {
            $('#period-from').data('DateTimePicker').maxDate(e.date);
        });
    });
 </script>

Although it would be really cool if we could pass a model in datepicker options like datetimepicker-options="{ maxDate: vm.periodTo }".

xnyssxy commented 8 years ago

How can I deal with the maxDate and minDate if use angularJS?

diegoguevara commented 8 years ago

Hi, @xnyssxy

I use the following, this worked for me, using data-before-render attribute.

In Html View:

<datetimepicker data-ng-model="data.date" data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>

In AngularJS Controller

$scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
    for(var i=0; i<$dates.length; i++ ) {
        if( moment( $dates[i].utcDateValue ).isBefore(moment()) ){
            $dates[i].selectable = false;
        }
    }
}

I hope it helps.