Moment.js ajax 请求中的未定义对象引用

Question

我正在尝试使用 Eonasdan 的 bootstrap-datetimepicker 制作一个简单的预订日历，它建立在我包含本地化文件的 moment.js 库之上。我设置了一个基本的链接选择器输入字段和一个按钮，用于使用简单的 ajax 请求发送带有日期的电子邮件。但是，在提交表单时，出现以下错误：

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

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

文件摘录（第 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';
    }
},

没有发送电子邮件，但从日历中获取日期。

这是我的 ajax 文件：

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

和 PHP 文件：

<?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;            
?>

如您所见，这是非常基本的内容。我想知道我在这里遗漏了什么，以便 locale-hr.js 没有可参考的对象，或者我做错了什么，或者这是一个需要修复的已知问题 (Google 没有给我任何东西）。这是 jsfiddle 但没有 ajax 调用，因为我以前从未使用过 fiddle 并且现在不知道如何设置它。待会儿我可能会回来弄清楚并添加它。

如果我要扩展问题，请告诉我。谢谢。

Answer 1

可能存在一些错误：

已更新 fiddle：

`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({
     useCurrent: false, 
     allowInputToggle: true,
     viewMode: 'days',
        //minDate: moment(),
  locale: hr,
  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',
  locale: hr,
  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>

Answer 2

Eonasdan 的 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 部分）。您必须更改发送到服务器的类型，您可以：

使用 moment format 传递字符串（如果需要可以指定格式）。您的代码将是：data: { date1: date1.format(), date2: date2.format() }
使用时刻 valueOf() 传递毫秒。代码：data: { date1: date1.valueOf(), date2: date2.valueOf() }
使用时刻 unix() 传递秒数。代码：data: { date1: date1.unix(), date2: date2.unix() }

Moment.js ajax 请求中的未定义对象引用

Moment.js undefined object reference on ajax request

javascript

ajax

momentjs

bootstrap-datetimepicker