两个日期字符串JS之间的差异

Question

我试着写代码，这应该是下一步:当客户来到一个网站时，他看到两个输入，今天日期和日期加三天。在底部的网站将是一个表格，显示多少天之间的两个输入的日期(排序1天，2-3天，4-7天)。我写了可以设置日期的代码，但我不能按类设置元素的样式。我是个新手。请帮个忙。

​

document.addEventListener('DOMContentLoaded', function() {
  var dFrom = document.querySelector('#my_lease_before');
  var dTo = document.querySelector('#my_lease_from');

    // get today date
    var dNow = new Date();
    // create var for add 3 days
    var dThen = new Date();
    // add 3 days
    dThen.setDate(dThen.getDate() + 3);

    // add value to inputes
    dTo.value = formatDate(dNow);
    dFrom.value = formatDate(dThen);

    //date-date=number, after make from millisec to days
    var dd = (dThen - dNow) / 1000 / 60 / 60 / 24;
   console.log(dd);
   // alert(dd);
    if (dd <= 1) {
      var s1 = document.querySelector('.space-1');
      s1.style.borderRadius = '50%';
      s1.style.background = 'red';
      s1.style.display = 'inline-block';
      s1.style.color = 'white';
      s1.style.padding = '5px 2px';
    } else if (dd > 1 && dd <= 2) {
      var s2 = document.querySelectorAll('.space-2');
      s2.style.borderRadius = '50%';
      s2.style.background = 'red';
      s2.style.display = 'inline-block';
      s2.style.color = 'white';
      s2.style.padding = '5px 2px';
    } else if (dd > 2 && dd <= 6) {
      var s3 = document.querySelectorAll('.space-3');
       s3.style.borderRadius = '50%' ;
       s3.style.borderRadius = '50%';
       s3.style.background = 'red';
       s3.style.display = 'inline-block';
       s3.style.color = 'white';
       s3.style.padding = '5px 2px';
 alert(s3);
    }else if (dd > 6 && dd <= 10) {
      var s4 = document.getElementsByClass('space-4');
      s4.style.borderRadius = '50%';
      s4.style.background = 'red';
      s4.style.display = 'inline-block';
      s4.style.color = 'white';
      s4.style.padding = '5px 2px';
      
    }else if (dd > 10 && dd <= 16) {
      var s5 = document.getElementsByClass('space-5');
      s5.style.borderRadius = '50%';
      s5.style.background = 'red';
      s5.style.display = 'inline-block';
      s5.style.color = 'white';
      s5.style.padding = '5px 2px';
    }else if (dd > 16 && dd <= 24) {
      var s6 = document.getElementsByClass('space-6');
      s6.style.borderRadius = '50%';
      s6.style.background = 'red';
      s6.style.display = 'inline-block';
      s6.style.color = 'white';
      s6.style.padding = '5px 2px';
    }
  });


function formatDate(date) {
  //add zero for date before 10
  return [
    date.getDate().toString().padStart(2, '0'),
    (date.getMonth() + 1).toString().padStart(2, '0'),
    date.getFullYear()
  ].join('.');
  // delimiter
};

function parseDate(date) {
  var tmp = date.split('.');
  return new Date(tmp[2], tmp[1], tmp[0], 0, 0, 0, 0);

};

<label>
	<span>rent from :</span> 
	<input type="data" name="my_lease_from" id="my_lease_from">
</label>
<label>
	<span>rent to :</span> 
	<input type="data" name="my_lease_before" id="my_lease_before">
</label>
<div class="my_price_gps">
    <span>GPS навигатор</span>
    <table>
		<thead>
			<tr>
				<th>2 дня</th>
				<th>3-6 дней</th>
				<th>7-10 дней</th>
	                        <th>11-16 дней</th>
				<th>17-24 дня</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="my_day_2"><span class="space-2">5 €</span></td>
				<td class="my_day_3"><span class="space-3">4 €</span></td>
				<td class="my_day_4"><span class="space-4">4 €</span></td>
				<td class="my_day_5"><span class="space-5">3 €</span></td>
				<td class="my_day_6"><span class="space-6">2 €</span></td>
			</tr>
		</tbody>
	</table>
</div>
<div class="my_price_chair">
	<span>Детские<br/>автокресла</span>
	<table>
		<tbody>
			<tr>
				<td class="my_day_2"><span class="space-2">4 €</span></td>
				<td class="my_day_3"><span class="space-3">0 €</span></td>
				<td class="my_day_4"><span class="space-4">0 €</span></td>
				<td class="my_day_5"><span class="space-5">0 €</span></td>
				<td class="my_day_6"><span class="space-6">0 €</span></td>
			</tr>
		</tbody>
	</table>
 </div>

​

Answer 1

如下所示，将日期解析为UTC，并附加一个Z-，例如：

new Date('2011-04-11T10:20:30Z').

要以协调世界时显示日期，请使用.toString().使用.toUTCString(),以用户本地时间显示日期

For More Details