# bootstrap Daterangepicker



## swamp1001 (22. April 2014)

Hallo liebe Helfer,

ich bin am verzweifeln.
Ich benutze den daterangepicker von https://github.com/dangrossman/bootstrap-daterangepicker
und ich bekomme es einfach nicht hin wenn man den Apply Button drückt, das er dann eine andere Funktion aufruft und dieser Funktion den ausgewählten Datumsbereich übergibt.

Der Zweck ist, das ich gerne eine Statistik in diesem Datumsbereich auswerten möchte nur leider bekomme ich es nicht hin.


```
<script type="text/javascript" language="javascript">
//Date Range Picker          
$(document).ready(function() {
    $('#reportrange').daterangepicker({
            startDate: moment().subtract('days', 29),
            endDate: moment(),
            minDate: '01/01/2014',
            maxDate: '31/12/2099',
            dateLimit: {
                days: 60
            },
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: false,
            ranges: {
                'Heute': [moment(), moment()],
                'Gestern': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Letzten 7 Tage': [moment().subtract('days', 6), moment()],
                'Letzten 30 Tage': [moment().subtract('days', 29), moment()],
                'Dieser Monat': [moment().startOf('month'), moment().endOf('month')],
                'Letzter Monat': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            format: 'DD/MM/YYYY',
            separator: ' to ',
            locale: {
                applyLabel: 'Abfragen',
                fromLabel: 'Von',
                toLabel: 'Bis',
                customRangeLabel: 'Benutzer definiert',
                daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                firstDay: 1
            }
        },
        function(start, end) {
            console.log("Callback has been called!");
            $('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
        }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D. MMMM YYYY') + ' - ' + moment().format('D. MMMM YYYY'));
    
});
</script>
```

Ich hoffe mir kann jemand helfen.

Besten Dank


----------



## Quaese (25. April 2014)

Hi,

nach der Dokumentation zum *daterangepicker* gibt es ein Event *apply.daterangepicker*, das feuert, wenn der apply-Button gedrückt wurde. Dieses scheint als zweites Argument ein *DateRangePicker*-Objekt übergeben zu bekommen, welches die Eigenschaften *startDate* und *endDate* besitzt.

```
$('#reportrange').on('apply.daterangepicker', function(e, DateRangePicker){
  console.log("StartDate: ", DateRangePicker.startDate);
  console.log("EndDate: ", DateRangePicker.endDate);
});
```
Ciao
Quaese


----------



## swamp1001 (25. April 2014)

Guten Morgen Quaese,

das hatte ich auch gefunden, aber ich kenne mich noch nicht so gut mit Javascript aus.
Kleine Funktionen kann ich schon erstellen, ich bekomme nur diese beiden Variablen nicht.
Hab schon viel probiert mir die beiden Variablen über alert() auszugeben, nur leider bekomme ich die  nicht angezeigt :-(

Kannst du mir da bitte helfen?

Danke und ein schönes Wochenende.


----------



## Quaese (26. April 2014)

Hi,

du musst doch nur meinen Schnipsel in deinen Code einfügen - nachdem das daterangepicker-Element erstellt wurde.

```
$(document).ready(function() {
    $('#reservation').daterangepicker({
            startDate: moment().subtract('days', 29),
            endDate: moment(),
            minDate: '01/01/2014',
            maxDate: '31/12/2099',
            dateLimit: {
                days: 60
            },
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: false,
            ranges: {
                'Heute': [moment(), moment()],
                'Gestern': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Letzten 7 Tage': [moment().subtract('days', 6), moment()],
                'Letzten 30 Tage': [moment().subtract('days', 29), moment()],
                'Dieser Monat': [moment().startOf('month'), moment().endOf('month')],
                'Letzter Monat': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            format: 'DD/MM/YYYY',
            separator: ' to ',
            locale: {
                applyLabel: 'Abfragen',
                fromLabel: 'Von',
                toLabel: 'Bis',
                customRangeLabel: 'Benutzer definiert',
                daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                firstDay: 1
            },
            apply: function(){
                console.log('apply', arguments);
            }
        },
        function(start, end) {
            console.log("Callback has been called!");
            $('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
        }
    );

    $('#reservation').on('apply.daterangepicker', function(e, DateRangePicker){
      alert("StartDate: ", DateRangePicker.startDate);
      alert("EndDate: ", DateRangePicker.endDate);
    });

    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D. MMMM YYYY') + ' - ' + moment().format('D. MMMM YYYY'));
});
```
Ciao
Quaese


----------



## swamp1001 (27. April 2014)

Guten Morgen Quaese,

so hat es leider nicht funktioniert, aber ich hab es hinbekommen, es war leichter als gedacht ;-)


```
$(document).ready(function() {
    $('#reportrange').daterangepicker({
            startDate: moment().subtract('days', 29),
            endDate: moment(),
            minDate: '01/01/2014',
            maxDate: '31/12/2099',
            dateLimit: {
                days: 60
            },
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: false,
            ranges: {
                'Heute': [moment(), moment()],
                'Gestern': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Letzten 7 Tage': [moment().subtract('days', 6), moment()],
                'Letzten 30 Tage': [moment().subtract('days', 29), moment()],
                'Dieser Monat': [moment().startOf('month'), moment().endOf('month')],
                'Letzter Monat': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            format: 'DD/MM/YYYY',
            separator: ' to ',
            locale: {
                applyLabel: 'Abfragen',
                fromLabel: 'Von',
                toLabel: 'Bis',
                customRangeLabel: 'Benutzer definiert',
                daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                firstDay: 1
            }
        },
        function(start, end) {
            console.log("Callback has been called!");
            $('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY')); 
			alert(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY')); //Hier bekomme ich die Daten
        }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D. MMMM YYYY') + ' - ' + moment().format('D. MMMM YYYY'));
	
});
```

Vielen Dank für die Hilfe


----------



## Quaese (28. April 2014)

Hi,

also bei mir funktioniert meine Variante tadellos.

Die Unterschiede der beiden Varianten liegen in deren Ausführungshäufigkeit. Die *callback*-Funktion aus dem Konstruktor wird nur aufgerufen, wenn tatsächlich eine *Änderung *im Datumsbereich stattgefunden hat, die *apply*-Methode *jedes Mal*, wenn der Apply-Button gedrückt wird.

Ciao
Quaese


----------

