2017-08-26 64 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