2017-08-26 60 views
2

我有两个类型日期输入字段。类型日期输入字段部分清除

<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

脚本由平变化

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';  
     } 
+0

它对我有效https://jsfiddle.net/k9nb2qhz/ –

回答

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属性从开始&结束日期。

希望这会帮助你。

+0

结果相同。 – maciejka

+0

'onchange =“处理程序(事件)”'这个'处理程序'方法做什么? – Shiladitya

+0

也许我应该以某种方式清除startdate输入中的max属性? – maciejka