JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<label for="dateA">A日期:</label>
    <input type="date" id="dateA" name="dateA">
     <span id="result" class="result"></span>

    <label for="dateC">C日期:</label>
    <input type="date" id="dateC" name="dateC">

CSS

.result {
            margin-left: 10px;
            font-weight: bold;
        }

JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
    const dateA = document.getElementById('dateA');
    const dateC = document.getElementById('dateC');

    dateA.addEventListener('change', () => {
        dateC.value = dateA.value;
    });
});

document.addEventListener('DOMContentLoaded', (event) => {
    const dateA = document.getElementById('dateA');
    const result = document.getElementById('result');
    const specifiedDate = '2024-06-24'; // 指定的日期，可以更改为所需的日期

    dateA.addEventListener('change', () => {
      const dateValue = dateA.value;

      // 发起AJAX请求
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '.', true);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      xhr.onreadystatechange = function () {
        //if (xhr.readyState === 4 && xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          if (dateA.value === specifiedDate) {
            result.textContent = '日期相同';
            result.style.color = 'green';
          } else {
            result.textContent = '日期不同';
            result.style.color = 'red';
          }
        //}
      };
      xhr.send(JSON.stringify({ date: dateValue }));
      
       //if (dateA.value === specifiedDate) {
       //     result.textContent = '日期相同';
       //     result.style.color = 'green';
       // } else {
       //     result.textContent = '日期不同';
      //      result.style.color = 'red';
      //  }
    });
});