Question

我有一个包含日期的数据属性的div。当我检索所述数据值时，它不是日期，而是字符串：

<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
    <span>some stuff in here</span>
</div>

我正在检索数据元素，如下所示：

var currentDateString = $(this).data('expense-date');

然后我尝试将值拆分为字符串数组：

var currentDateArray = currentDateString.split("/");

然后我将数组的一部分指定为我想要创建的日期的变量：

var year = Number(currentDateArray[2].toString());
var month = Number(currentDateArray[0].toString());
var day = Number(currentDateArray[1].toString());

有趣的是，我的三个变量都说他们是NaN。因此，我的新Date变量的声明是＆＃34; Invalid Date＆＃34;：

var currentDate = new Date(year, month - 1, day);

我可以执行以下操作并且工作正常：

var dateString = "5/3/2016";
var dateStringArray = dateString.split("/");
var testDate = new Date(dateStringArray[2], dateStringArray[0] - 1, dateStringArray[1]);

只有当我从div元素中读取data属性时才将值设置为我不知道它是什么。

我在Visual Studio中进行调试，这是我的立即窗口试图测试值的屏幕截图：

以下是完整示例...我的HTML：

<div class="col-md-6" id="detailPreview">
    <div class="panel panel-transparent" data-expense-date="5/2/2016">                             
        <div class="panel-heading">                                 
            <h3 class="panel-title">Monday, May 2, 2016</h3>                                 
            <div class="panel-actions">                                     
                <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>                                 
            </div>                             
        </div>                             
        <div class="panel-body expense-date-body">                            
            <div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">                                 
                <div class="panel-heading">                                     
                    <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>                                    
                    <div class="panel-actions">                                         
                        <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>                                     
                    </div>                                 
                </div>                                 
                <!-- <div class="panel-collapse"> -->                                     
                <div class="panel-body">                                    
                    Business Name: Best Buy                                         
                    Location: Topeka, KS                                         
                    Purpose: Purchased replacement laptop for inventory                                     
                </div>                                 
                <!-- </div> -->                              
            </div>
        </div>                          
    </div>
    <div class="panel panel-transparent" data-expense-date="5/3/2016">                             
        <div class="panel-heading">                                 
            <h3 class="panel-title">Tuesday, May 3, 2016</h3>                                 
            <div class="panel-actions">                                     
                <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>                                 
            </div>                             
        </div>                             
        <div class="panel-body expense-date-body">                             
            <div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">                                 
                <div class="panel-heading">                                     
                    <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>                                    
                    <div class="panel-actions">                                         
                        <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>                                     
                    </div>                                 
                </div>                                 
                <!-- <div class="panel-collapse"> -->                                     
                <div class="panel-body">                                         
                    Business Name: Wal-Mart                                         
                    Location: Topeka, KS                                         
                    Purpose: Purchased scotch tape                                     
                </div>                                 
                <!-- </div> -->                              
            </div>
        </div>                          
    </div>
</div>

我的javascript：

$("[data-expense-date]").each(function () {
  if ($(this).data('expense-date') === dateShort.toString()) {
    parentDiv = $(this);
    return false;
  } else {
    debugger;

    // determine if this date is before or after the param date.
    //var dataExpenseDate = $(this).data('expense-date');
    var currentDateString = $(this).data('expense-date'); // "5/2/2016"

    var currentDateArray = currentDateString.split('/'); // [5,2,2016]
    //var yearString = currentDateArray[2];
    //var yearNumber = Number(yearString);
    var year = Number(currentDateArray[2]); // "2016" <-- NaN
    var month = Number(currentDateArray[0]); // "5" <-- NaN
    var day = Number(currentDateArray[1]); // "3" <-- NaN

    var currentDate = new Date(year, month - 1, day); // Invalid Date

    if (date > currentDate) {
        newDivInjectAfter = $(this);
    }
  }
});

更新
这只发生在我使用Internet Explorer（11）时。 Edge，Opera，FireFox和Chrome，ALL正确解析值。感谢所有回复人员，但我相信我发现了IE的错误。

Answer 1

使用$('#firstRow').attr('data-expense-date')选择器获取data-expense-date属性。

＆＃13;

$(function() {

var 
  currentDateString = $('#firstRow').attr('data-expense-date'),
  currentDateArray = currentDateString.split('/'), // ['5', '3', '2016']
  year = +currentDateArray[2].toString(), // 2016
  month = +currentDateArray[0].toString(), // 5
  day = +currentDateArray[1].toString(), // 3
  currentDate = new Date(year, month - 1, day);


alert(currentDate); //  Date {Tue May 03 2016 00:00:00 GMT+0500 (AZST)}

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
    <span>some stuff in here</span>
</div>

＆＃13;

Answer 2

就像有人在评论中所说，我认为this可能是错误的。只是几个笔记。由于属性是字符串，因此根本不需要.toString()，您也不需要Date Number。只需将它们输入为字符串即可。你也可以摆脱所有的变数。

var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
alert(new Date(currentDateArray[2], currentDateArray[1], --currentDateArray[0]));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
  <span>some stuff in here</span>
</div>

或（不是传统方法）

var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
currentDateArray[0] --; // day -1;
currentDateArray.push(null);
alert(new(Date.bind.apply(Date, currentDateArray.reverse()))());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
  <span>some stuff in here</span>
</div>

更新：我试图找到IE11错误，但无法重现它。这段代码适合我。刚刚意识到你使用美国日期格式，我的另外两个例子使用英国日期格式，所以他们需要修改。

var parentDiv;
var date = new Date();
var dateShort = date.toLocaleDateString();

$("[data-expense-date]").each(function() {

  if ($(this).data('expense-date') === dateShort) {
    parentDiv = $(this);
    return false;
  } else {

    var currentDateString = $(this).data('expense-date'); // "5/2/2016"

    var currentDateArray = currentDateString.split('/'); // [5,2,2016]
    var year = Number(currentDateArray[2]); // "2016" <-- NaN
    var month = Number(currentDateArray[0]); // "5" <-- NaN
    var day = Number(currentDateArray[1]); // "3" <-- NaN
    
    

    var currentDate = new Date(year, month - 1, day); // Invalid Date
    
    console.log(day,month,year,currentDate);

    if (date > currentDate) {
      newDivInjectAfter = $(this);
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="detailPreview">
  <div class="panel panel-transparent" data-expense-date="5/2/2016">
    <div class="panel-heading">
      <h3 class="panel-title">Monday, May 2, 2016</h3> 
      <div class="panel-actions">
        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
      </div>
    </div>
    <div class="panel-body expense-date-body">
      <div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3> 
          <div class="panel-actions">
            <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
            <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
          </div>
        </div>
        <!-- <div class="panel-collapse"> -->
        <div class="panel-body">
          Business Name: Best Buy Location: Topeka, KS Purpose: Purchased replacement laptop for inventory
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
  <div class="panel panel-transparent" data-expense-date="5/3/2016">
    <div class="panel-heading">
      <h3 class="panel-title">Tuesday, May 3, 2016</h3> 
      <div class="panel-actions">
        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
      </div>
    </div>
    <div class="panel-body expense-date-body">
      <div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3> 
          <div class="panel-actions">
            <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
            <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
          </div>
        </div>
        <!-- <div class="panel-collapse"> -->
        <div class="panel-body">
          Business Name: Wal-Mart Location: Topeka, KS Purpose: Purchased scotch tape
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</div>

Answer 3

在搜索我的问题并将Internet Explorer附加到搜索后，我在这里得到了一个热门。它似乎已经使用RegEx解决了：

Strange behaviour with spliting a string in Javascript

JavaScript类型转换不是数字

3 个答案: