Moment.js undefined Objekt Referenz auf Ajax Anfrage

Question

Ich versuche, eine einfache Buchung Kalender mit Eonasdan Bootstrap-Datetimepicker, die auf moment.js-Bibliothek, für die ich Lokalisierungsdatei enthalten gebaut. Ich habe ein einfaches Eingabefeld mit verknüpften Pickern und eine Schaltfläche eingerichtet, um mit einer einfachen Ajax-Anfrage eine E-Mail mit den Daten zu senden. Jedoch nach dem Absenden des Formulars, bekomme ich folgende Fehlermeldung:

// locale-hr.js (line 89, col 1)

TypeError: this is undefined switch (this.day()) {

Auszug aus der Datei (Zeilen 88-102):

nextWeek : function() { 
    switch (this.day()) { 
     case 0: 
      return '[u] [nedjelju] [u] LT'; 
     case 3: 
      return '[u] [srijedu] [u] LT'; 
     case 6: 
      return '[u] [subotu] [u] LT'; 
     case 1: 
     case 2: 
     case 4: 
     case 5: 
      return '[u] dddd [u] LT'; 
    } 
}, 

keine E-Mails gesendet werden, aber Daten abgerufen werden aus der Kalender.

Dies ist meine Ajax-Datei:

$(function() { 
    $("#reservationForm").on("submit", function(e) { 
     e.preventDefault(); 

     var url = "../bin/reservation.php"; 

     // stores dates from each calendar 
     var date1 = $("#datetimepicker1").data("DateTimePicker").date(); 
     var date2 = $("#datetimepicker2").data("DateTimePicker").date(); 

     $.ajax({    
      type: "POST", 
      url: url, 
      data: { date1: date1, date2: date2 }, 
     }).done(function(response) { 
      alert("Msg sent"); 
     });      
    }); 
}); 

Und die PHP-Datei:

<?php 
    if (empty($_POST['date1']) || empty($_POST['date2'])) { 
     echo ERROR_NO_ARGS; 
     return false; 
    } 

    $date1 = $_POST['date1']; 
    $date2 = $_POST['date2']; 

    $to = 'my@email.com'; 
    $email_subject = "Title"; 
    $email_body = "Selected dates:" . "From $date1 to $date2"; 
    $headers = "From: Contact form\n";  
    $headers .= "Content-Type: text/plain; charset=utf-8" . "\r\n"; 

    mail($to, $email_subject, $email_body, $headers); 

    return true;    
?> 

Es ist ziemlich grundlegende Dinge, wie man sehen kann. Ich würde gerne wissen, was ich hier vermisse, so dass locale-hr.js kein Objekt hat, das ich referenzieren kann oder wenn ich etwas falsch mache oder wenn dieses Problem bekannt ist, das behoben werden muss (Google hat mir nichts angeboten irgendetwas von der Art). Hier ist jsfiddle, aber ohne Ajax-Ruf, da ich vorher noch nie Geige benutzt habe und nicht weiß, wie ich es im Moment einrichten soll. Ich könnte später zurückkommen, um es herauszufinden und hinzuzufügen.

Wenn ich die Frage erweitern sollte, informieren Sie mich bitte. Vielen Dank.

Answer 1

Eonasdan des Bootstrap-Datetime date Methode liefert ein moment object, so dass Sie versuchen, zu senden Ihr Server ein Objekt, das jQuery nicht serialisieren kann (siehe jQuery.ajaxdata Abschnitt). Sie müssen die Art ändern, die Sie auf Ihren Server zu senden, können Sie:

• einen String übergeben Moment mit format (wenn Sie benötigen Sie Format festlegen können). Ihr Code lautet: data: { date1: date1.format(), date2: date2.format() }
• Pass Millisekunden mit Moment valueOf(). Code: data: { date1: date1.valueOf(), date2: date2.valueOf() }
• Pass Sekunden mit Moment unix(). Code: data: { date1: date1.unix(), date2: date2.unix() }

Answer 2

möglich gibt es einige Bugs:

aktualisiert Geige:

`https://jsfiddle.net/dssoft32/d4zuxy4e/2/` 

// Template JS 
 

 
var fnMain = function(){ 
 

 
    // Calendar localization 
 
    var hr = moment.locale('hr', { 
 
     days: ["Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota","Nedjelja"], 
 
     weekdaysShort: ["Pon", "Uto", "Sri", "Čet", "Pet", "Sub","Ned"], 
 
     weekdaysMin: ["Po", "Ut", "Sr", "Če", "Pe", "Su", "Ne"], 
 
     months: ["Siječanj", "Veljača", "Ožujak", "Travanj", "Svibanj", "Lipanj", "Srpanj", "Kolovoz", "Rujan", "Listopad", "Studeni", "Prosinac"], 
 
     monthsShort: ["Sij", "Velj", "Ožu", "Tra", "Svi", "Lip", "Srp", "Kol", "Ruj", "Lis", "Stu", "Pro"], 
 
     today: "Danas", 
 
     } 
 
    ); 
 

 

 
    var enumerateDaysBetweenDates = function(startDate, endDate) { 
 
     var dates = []; 
 
     
 
     while (startDate<= endDate) { 
 
      dates.push(startDate.format('D/M/YYYY')); 
 
      startDate.add(1, 'days'); 
 
     } 
 

 
     return dates; 
 
    }; 
 

 

 
    var formatDisabledDates = function(dateSet) { 
 
     var newSet = []; 
 

 
     for(var i=0; i < dateSet.length; i++) { 
 

 
      newSet.push(moment(dateSet[i], "D/M/YYYY")); 
 

 
     } 
 

 
     return newSet; 
 

 
    } 
 

 

 
     var fromDate = moment("10/07/2016", "D/M/YYYY"); 
 
     var toDate = moment("21/07/2016", "D/M/YYYY"); 
 

 
       var results = enumerateDaysBetweenDates(fromDate, toDate); 
 

 
    //}); 
 

 
    var disabledSet = formatDisabledDates(results); 
 
    console.log(disabledSet); 
 

 
    var chckDate; 
 

 
    $('#datetimepicker1').datetimepicker({ 
 
    \t useCurrent: false, 
 
    \t allowInputToggle: true, 
 
    \t viewMode: 'days', 
 
     //minDate: moment(), 
 
\t \t locale: hr, 
 
\t \t format: 'DD/MM/YYYY', 
 
     disabledDates: disabledSet 
 
    }).on("dp.change", function (e) { 
 
     chckDate = $(this).data("DateTimePicker").date(); 
 
     chckDate = chckDate.format('DD. MM. YYYY'); 
 
     
 
    }).on("dp.show", function (e){ 
 
     $("[data-day*='"+ chckDate + "']").addClass("startFrom"); 
 

 
    }); 
 

 
    $('#datetimepicker2').datetimepicker({ 
 
     useCurrent: false, 
 
     allowInputToggle: true, 
 
     viewMode: 'days', 
 
\t \t locale: hr, 
 
\t \t format: 'DD/MM/YYYY', 
 
     disabledDates: disabledSet 
 
    }).on("dp.change", function (e) { 
 
    // 
 
    }).on("dp.show", function (e){ 
 
     $("[data-day*='"+ chckDate + "']").addClass("startFrom"); 
 
    }); 
 

 
     
 

 

 

 

 

 

 

 

 

 

 
} // fnMain endDate 
 

 

 

 
$(document).ready(fnMain);

body { 
 
    background-color: #eee; 
 
} 
 

 
.input-group { 
 
    margin-top: 20px; 
 
} 
 

 

 
.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover { 
 
    background: rgba(255, 0, 0, 0.1) none repeat scroll 0 0; 
 
    border-radius: 0; 
 
    color: #777; 
 
    cursor: not-allowed; 
 
} 
 

 
.bootstrap-datetimepicker-widget table td.startFrom, .bootstrap-datetimepicker-widget table td.startFrom:hover { 
 
    background-color: orange; 
 
    border-radius: 0; 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<script src="https://github.com/moment/moment/blob/develop/locale/hr.js"></script> 
 

 

 
<div class="container"> 
 

 
    <form id="reservationForm"> 
 
     <div class='col-md-6'> 
 
     
 
     <!-- FROM --> 
 
     <div class="form-group"> 
 
      <div class='input-group date' id='datetimepicker1'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- TO --> 
 
     <div class='col-md-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker2'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-12"> 
 
     <button class="logdates" type="submit">Send</button> 
 
     </div> 
 

 
    </form> 
 
    </div>