javascript - 日期类型的输入字段部分清除

Question

我有两个日期类型的输入字段。

<input id="startdate" type="date" min='@DateTime.Now.AddDays(1).ToShortDateString()' onchange="handler(event)" />
<input id="enddate" type="date" min="@DateTime.Now.AddDays(2).ToShortDateString()" onchange="handler(event)" />

当我点击按钮时，它被称为 javascript 函数，它应该清除每个输入的内容。

$(function () {
                $("#btnRefresh").click(function () {
                    $('#avaiableHouses').html('');
                    document.querySelector('#startdate').value = '';
                    document.querySelector('#enddate').value = '';
                    $('#startdate, #enddate').val('');
                });
            })

当它被点击时，id 为 enddate 的输入被正确清除，但是在输入 startdate 中，日期和月份被重置，但年份仍然存在。输入字段的格式是 YYYY-MM-DD

onchange调用的脚本

function handler(e) {
            var source = e.srcElement.id;
            if (source == 'startdate')
            {
                $('#startdate').attr('min', moment().format('YYYY-MM-DD'))
                var startDate = $('#startdate').val();
                var endDate = moment(startDate).add(1, 'days').format('YYYY-MM-DD');
                $('#enddate').attr('min', endDate);
            }
            else if (source == 'enddate')
            {
                $('#enddate').attr('min', moment().format('YYYY-MM-DD'))
                var startDate = $('#enddate').val();
                var endDate = moment(startDate).add(-1, 'days').format('YYYY-MM-DD');
                $('#startdate').attr('max', endDate);
            }
            document.getElementById("btnConfirmTerm").style.visibility = 'hidden';     
        }

Answer 1

给您一个解决方案 https://jsfiddle.net/Ladjj8ay/1/

handler = function(e) {
  var source = e.srcElement.id;
  if (source == 'startdate')
  {
      $('#startdate').attr('min', moment().format('YYYY-MM-DD'))
      var startDate = $('#startdate').val();
      var endDate = moment(startDate).add(1, 'days').format('YYYY-MM-DD');
      $('#enddate').attr('min', endDate);
  }
  else if (source == 'enddate')
  {
      $('#enddate').attr('min', moment().format('YYYY-MM-DD'))
      var startDate = $('#enddate').val();
      var endDate = moment(startDate).add(-1, 'days').format('YYYY-MM-DD');
      $('#startdate').attr('max', endDate);
  }
  document.getElementById("btnConfirmTerm").style.visibility = 'hidden';     
}

$(function () {
   $("#btnRefresh").click(function () {
      $('#avaiableHouses').html('');
      $('#startdate, #enddate').val('').removeAttr('min').removeAttr('max');
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<input id="startdate" type="date" min='@DateTime.Now.AddDays(1).ToShortDateString()' onchange="handler(event)" />
<input id="enddate" type="date" min="@DateTime.Now.AddDays(2).ToShortDateString()" onchange="handler(event)" />

<button id="btnRefresh">
Clear
</button>

您需要从开始日期和结束日期中删除 min 和 max 属性。

希望对您有所帮助。