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

时间:2017-08-26 17:18:00

标签: javascript jquery

我有两个类型为date的输入字段。

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

点击后,标识为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';     
        }

1 个答案:

答案 0 :(得分: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&amp;来自start&amp;的max属性结束日期。

希望这会对你有所帮助。