CODEWITHSUNDEEP
javascriptjquery
maciejka
maciejka

Reputation: 948

Input field of type date clear partially

I have two input fields of type 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)" />

When I click button it is called javascript function which should clear content each of input.

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

When it is clicked input with id enddate is cleared properly, however in input startdate days and months are reseted but year still remains. Format of input fields is YYYY-MM-DD

Script called by 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';     
        }

Upvotes: 2

Views: 2032

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution 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>

You need to remove the min & max attribute from start & end dates.

Hope this will help you.

Upvotes: 1

Related Questions