daterangepicker anwenden Button nicht richtig funktioniert

Ich bin mit daterangepicker überprüfen Sie bitte mein code hier JSFIDDLE

Habe ich set default Datum

"endDate": "08/03/2015",
"endDate": "08/03/2015",

Und ich haben ein alert() für die Prüfung mein code funktioniert oder nicht.

alert("New date range selected: '" + start.format('YYYY-MM-DD') + "' to '" + end.format('YYYY-MM-DD') + "'");

Wenn ich bin klicken auf book_date textbox-Reihe-Kalender ist erschienen.
Wenn ich Veränderungen Datum und klicken auf anwenden-button seine Arbeitsmethoden in Ordnung. Meine alert() Kasten zeigt perfekt. Aber wenn ich auf die Schaltfläche übernehmen, ohne änderung eines Datums. Zeit alert() box wird nicht angezeigt.

Auch book_date ist immer default-Datum nach einem Klick auf Textfeld, und klicken Sie irgendwo in die Seite. Also ich will nicht, um alle Standard-Datum ohne cilcking bestimmten Datum. textbox leer sein sollte, während Sie außerhalb von Kalender.

Meine Bearbeiteten Code:

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
    alert("New date range selected: '" + picker.startDate.format('YYYY-MM-DD') + "' to '" + picker.endDate.format('YYYY-MM-DD') + "'");
});

Meine textbox-Kalender bekommen, default-Wert, wenn ich nicht wählen Sie alle und klicken auf eine Stelle außerhalb irgendwo auf der Seite.

InformationsquelleAutor Chinmay235 | 2015-07-28

5

Die callback-Funktion nur ausgeführt wird, wenn ein neue Datum ausgewählt ist. Als mögliche Problemumgehung können Sie den apply.daterangepicker Ereignis, das ausgelöst wird, wenn die Schaltfläche übernehmen geklickt wird:

JS:
```
$('#book_date').on('apply.daterangepicker', function(ev, picker) {
  var startDate = picker.startDate;
  var endDate = picker.endDate;
  alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});
```
Sehen Sie ein Beispiel,hier.

Erweiterte Antwort

Es gibt keine eingebaute Möglichkeit, um zu verhindern, dass die Termine werden festgelegt, wenn Sie klicken Sie auf aus der Datum-picker, so dass Sie könnten versuchen, diese:

Anpassen der hide Funktion, so dass die Termine werden gelöscht, wenn die date picker geschlossen:
```
$('#book_date').on('hide.daterangepicker', function (ev, picker) {
    $('#book_date').val('');
});
```
Update der apply - Funktion zum füllen der Datteln Feld entsprechend. Also die Daten werden nur gesetzt, wenn der apply-button geklickt wird:
```
$('#book_date').on('apply.daterangepicker', function (ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;  
    //MM/DD/YYYY format
    $('#book_date').val(startDate.format('MM/DD/YYYY') + ' - ' + endDate.format('MM/DD/YYYY'));
});
```
Aktualisierte demo hier.
- Sie getan haben, 1 aber Mein Haupt-Lösung nicht gelöst wird noch. Können Sie bitte sagen Sie mir, Wenn ich auf die textbox ohne anklicken eines Kalender-Datum, dann werde ich klicken Sie außerhalb, wo die Seite die textbox leer sein sollte. Aber jetzt nimmt Standard-Datum.
- Bitte siehe meine update-Antwort. Hoffe, es hilft.
- Völlig textbox-Wert immer null. Apply - Taste auch nicht funktioniert
- Was haben Sie hier geändert. Immer noch hier, immer null Wert in meinen book_date-id, aber Ihre demo-Kokerei funktioniert.
- Ich habe eine Funktion zum ausblenden und aktualisiert die bewerben-Funktion, wie beschrieben in meiner Antwort.
- Ja, ich habe auch Hinzugefügt, dass. Aber in meinem code, das wird nicht funktionieren.
- Können Sie erstellen ein Turnschuh und das problem reproduzieren?
InformationsquelleAutor Ash
4

Wenn wir auf die Schaltfläche übernehmen dann die callback-Funktion ausgeführt, aber es ist Bedingung. Wenn der Datumsbereich geändert wird dann die callback-Funktion wird ausgeführt, sonst wird es nicht ausgeführt.
Wenn Sie wollen, um es auszuführen jedes mal, wenn Sie auf die Schaltfläche übernehmen hinsichtlich weniger der Datumsbereich geändert oder nicht, dann mache folgende Schritte.
1. Öffnen daterangepicker.js
2. Finden die Funktion zum ausblenden der DateRangePicker.Prototyp
3. Kommentieren Sie die folgende Bedingung vergleicht die neu gewählten Datumsbereich und die alten ausgewählten Datumsbereich
```
hide: function (e) {
this.container.hide();
//Below is the condition that checks for date range changes
//if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
    this.notify();

this.oldStartDate = this.startDate.clone();
this.oldEndDate = this.endDate.clone();

$(document).off('mousedown', this.hide);
this.element.trigger('hidden', { picker: this });
```
  },
oder auch Kommentar diesem.notify() in hide-Funktion und legen Sie es in clickApply: Funktion
```
    clickApply: function (e) {
        this.updateInputText();
        this.hide();
        this.notify();
    },
```
InformationsquelleAutor Manish Nayak

JS:

$(function () {
           
            $('#start_date_id').on('apply.daterangepicker', function (ev, picker) {
                var startDate = picker.startDate;
                var endDate = picker.endDate;
                alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
            });

        });

HTML:

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<input type="text" id="start_date_id" name="daterange"  />

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});
</script>
</body>
</html>

InformationsquelleAutor user10065411

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.