Moment.js undefined object reference on ajax request

Question

I'm trying to make a simple booking calendar using Eonasdan's bootstrap-datetimepicker which is built upon moment.js library for which I included localization file. I set up a basic linked pickers input fields and a button to send an e-mail with the dates using simple ajax request. However, upon submitting the form, I get the following error:

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

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

Excerpt from the file (lines 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';
    }
},

No e-mails are sent but dates are fetched from the calendar.

This is my ajax file:

$(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");
        });                     
    });
});

And the PHP file:

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

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

    $to = '[email protected]';
    $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;            
?>

It's pretty basic stuff as you can see. I'd like to know what am I missing in here so that locale-hr.js has no object to reference or if I'm doing something wrong or if this is known issue that needs to be fixed (Google didn't offer me anything of sort). Here's jsfiddle but without ajax call as I never used fiddle before and don't know how to set it up at the moment. I might come back later to figure it out and add it.

If I should expand the question, please inform me. Thanks.

Answer 1

Eonasdan's bootstrap-datetimepicker date method returns a moment object, so you are trying to send to your server an object that jQuery cannot serialize (see jQuery.ajax data section). You have to change the type you send to your server, you can:

• pass a string using moment format (if you need you can specify format). Your code will be: data: { date1: date1.format(), date2: date2.format() }
• pass milliseconds using moment valueOf(). Code: data: { date1: date1.valueOf(), date2: date2.valueOf() }
• pass seconds using moment unix(). Code: data: { date1: date1.unix(), date2: date2.unix() }