bootstrap Daterangepicker

swamp1001

Mitglied
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.

Code:
<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
 
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.
Code:
$('#reportrange').on('apply.daterangepicker', function(e, DateRangePicker){
  console.log("StartDate: ", DateRangePicker.startDate);
  console.log("EndDate: ", DateRangePicker.endDate);
});
Ciao
Quaese
 
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.
 
Hi,

du musst doch nur meinen Schnipsel in deinen Code einfügen - nachdem das daterangepicker-Element erstellt wurde.
Code:
$(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
 
Guten Morgen Quaese,

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

Code:
$(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
 
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
 

Neue Beiträge

Zurück