Angular Bootstrap DateTimePicker

html.de-Forum JavaScript
1

Hallo,

ich bin gerade dabei den DateTimePicker von Angular einzubinden, aber leider funktioniert es noch nicht so, wie ich es gerne hätte. Folgendermaßen stell ich mir das vor:

date_start = Datum Beginn
time_start = Zeit Beginn
date_end = Datum Ende
time_end = Zeit Ende

Mit meinem jetzigen Code kann ich zwar alles auswählen, aber nachdem ich „date_start“ ausgewählt habe, springt es direkt in „time_end“. Ich will aber, dass erst „date_start“ und dann „time_start“ gewählt wird. Und wenn der User dann auf „date_end“ klickt, soll er danach „time_end“ auswählen können.

     <div class="dropdown">
        <a class="dropdown-toggle" id="lb_date_start" role="button" data-toggle="dropdown" data-target="#" href="">
             Datum Start: {{ data.datetime_start | date:'dd.MM.yyyy' }}
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="lb_date_start">
            <datetimepicker data-ng-model="data.datetime_start"
            data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle', startView: 'year', minView: 'day' }">
            </datetimepicker>
        </ul>
    </div>
   
    <div class="dropdown">
        <a class="dropdown-toggle" id="lb_time_start" role="button" data-toggle="dropdown" data-target="#" href="">
            Zeit Start: {{ data.datetime_start | date:'HH:mm' }}
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="lb_time_start">
            <datetimepicker data-ng-model="data.datetime_start"
            data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle', startView: 'hour', minView: 'hour' }">
            </datetimepicker>
        </ul>
    </div>
   
    <div class="dropdown">
        <a class="dropdown-toggle" id="lb_date_end" role="button" data-toggle="dropdown" data-target="#" href="">
            Datum Ende: {{ data.datetime_end | date:'dd.MM.yyyy' }}
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="lb_date_end">
            <datetimepicker data-ng-model="data.datetime_end"
            data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle', startView: 'year', minView: 'day' }">
            </datetimepicker>
        </ul>
    </div>
   
    <div class="dropdown">
        <a class="dropdown-toggle" id="lb_time_end" role="button" data-toggle="dropdown" data-target="#" href="">
            Zeit Ende: {{ data.datetime_end | date:'HH:mm' }}
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="lb_time_end">
            <datetimepicker data-ng-model="data.datetime_end"
            data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle', startView: 'hour', minView: 'hour' }">
            </datetimepicker>
        </ul>
    </div>

Danke schon mal für eure Hilfe.

2

Angular Plugins funktionieren nicht immer out-of-the-box. Gelegentlich muss man in die Direktiven schauen und selber Anpassungen vornehmen, oder nach einer Alternative suchen.

Für ein eigenes Projekt habe ich den Datetimer-Picker von Gillardo verwendet. Der läuft problemlos.
https://github.com/Gillardo/bootstrap-ui-datetime-picker

3

Danke für deine Antwort!

Der Picker von Gillardo sieht auch nicht schlecht aus, aber der von dalelotts gefällt mir einfach schon zu gut :slight_smile:

Hab ne Weile dran gearbeitet, aber jetzt geht’s so wie ich es mir vorstelle.

Das ausschlaggebende war jedenfalls:

dropdownSelector: '.dropdown-toggle'

Der darf natürlich nicht bei allen vier gleich sein. Und dann funktioniert auch:

startView: 'year', minView: 'day'