You are viewing limited content. For full access, please sign in.

Question

Question

Date Field Date Selection Icon Disappearing

asked on September 9, 2020

Hello,

I have a form that has two date fields - a "from date" and a "to date." The "to date" references the "from date" to determine the maximum allowable date (6 weeks after the "from date.") I am encountering an issue where in Internet Explorer, as well as Chrome and Safari on iOS, after selecting the first date, the option to select a second date disappears. If you'd like to see the form I am referencing, it can be found here: https://forms.ci.red-wing.mn.us/Forms/openburn  This issue is not present with Chrome, Firefox, or Edge. Any input on this would be greatly appreciated.

Thanks,

Grady

0 0

Replies

replied on September 9, 2020

Hi Grady,

 

I can recreate the issue in IE11. There is a js error thrown from jqueryuimin. Could you share Javascript code that sets range of "to date"?

0 0
replied on September 10, 2020

Hi Ziyan,

Our VAR helped out with this, as I am not very familiar with Javascript. Here is the code: 

$(document).ready(function () {
  $('.Submit').hide();
  
  $('.email, .confirm').on('blur input', function () {
    if ($('.email input').val() !== $('.confirm input').val()) {
      
      if ($('.warningText').length > 0) {
        return;
      } else {
        $('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
      }
    } else {
      if ($('.email input').val() == null || $('.email input').val() == ''){
        return;
      } else {
        $('.warningText').remove();
      }
    }
  });
  $('.email input, .confirm input').on('change', function () {
    if ($('.email input').val() !== $('.confirm input').val()) {
      $('.Submit').hide();
    } else {
      if ($('.email input').val() == null || $('.email input').val() == ''){
        $('.Submit').hide();
      } else {
        var DepartInput = $('.DepartDate input').val();
        if (DepartInput == null || DepartInput == ''){
          $('.Submit').hide();
        } else {
          var ReturnInput = $('.ReturnDate input').val();
          if (ReturnInput == null || ReturnInput == ''){
          } else {
            var MinReturnDate = new Date(DepartInput);
            var MaxReturnDate = new Date(MinReturnDate.valueOf());
            MaxReturnDate.setDate(ReturnMax.getDate() + 42);
            var ReturnDate = new Date(ReturnInput);
            if (MaxReturnDate >= ReturnDate && MinReturnDate <= ReturnDate){
              $('.Submit').show();
            } else {
              $('.Submit').hide();
            }
          }
        }
      }
    }
  });
  var DepartMin = new Date();
  var DepartMinYear = DepartMin.getFullYear();
  var DepartMinMonth = ('0' + (DepartMin.getMonth() + 1)).slice(-2);
  var DepartMinDay = ('0' + DepartMin.getDate()).slice(-2);
  var DepartMinDate = (DepartMinYear + '-' + DepartMinMonth + '-' + DepartMinDay);
  $('.DepartDate input').attr('min',DepartMinDate);

  var ReturnMin = new Date();
  var ReturnMinYear = ReturnMin.getFullYear();
  var ReturnMinMonth = ('0' + (ReturnMin.getMonth() + 1)).slice(-2);
  var ReturnMinDay = ('0' + ReturnMin.getDate()).slice(-2);
  var ReturnMinDate = (ReturnMinYear + '-' + ReturnMinMonth + '-' + ReturnMinDay);
  $('.ReturnDate input').attr('min',ReturnMinDate);
  var ReturnMax = new Date(ReturnMin.valueOf());
  ReturnMax.setDate(ReturnMax.getDate() + 42);
  var ReturnMaxYear = ReturnMax.getFullYear();
  var ReturnMaxMonth = ('0' + (ReturnMax.getMonth() + 1)).slice(-2);
  var ReturnMaxDay = ('0' + ReturnMax.getDate()).slice(-2);
  var ReturnMaxDate = (ReturnMaxYear + '-' + ReturnMaxMonth + '-' + ReturnMaxDay);
  $('.ReturnDate input').attr('max',ReturnMaxDate);
  
  $('.DepartDate input').on('change', function() {
    var DepartMin = $('.DepartDate input').val();
    if (DepartMin == null || DepartMin == ''){
      $('.Submit').hide();
      var TempDate = new Date();
      var TempYear = TempDate.getFullYear();
      var TempMonth = ('0' + (TempDate.getMonth() + 1)).slice(-2);
      var TempDay = ('0' + TempDate.getDate()).slice(-2);
      var DepartMin = (TempMonth + '/' + TempDay + '/' + TempYear);
    }
    var DepartDateVal = DepartMin.split('/');
    var ReturnMinYear = DepartDateVal[2];
    var ReturnMinMonth = DepartDateVal[0];
    var ReturnMinDay = DepartDateVal[1];
    var ReturnMinDate = (ReturnMinYear +"-"+ ReturnMinMonth +"-"+ ReturnMinDay);
    $('.ReturnDate input').attr('min',ReturnMinDate);
    var ReturnMax = new Date(ReturnMinDate);
    ReturnMax.setDate(ReturnMax.getDate() + 42);
    var ReturnMaxYear = ReturnMax.getFullYear();
    var ReturnMaxMonth = ('0' + (ReturnMax.getMonth() + 1)).slice(-2);
    var ReturnMaxDay = ('0' + ReturnMax.getDate()).slice(-2);
    var ReturnMaxDate = (ReturnMaxYear + '-' + ReturnMaxMonth + '-' + ReturnMaxDay);
    $('.ReturnDate input').attr('max',ReturnMaxDate);
    var DepartInput = $('.DepartDate input').val();
    if (DepartInput == null || DepartInput == ''){
    } else {
      var ReturnInput = $('.ReturnDate input').val();
      if (ReturnInput == null || ReturnInput == ''){
      } else {
        var MinReturnDate = new Date(DepartInput);
        var MaxReturnDate = new Date(MinReturnDate.valueOf());
        MaxReturnDate.setDate(ReturnMax.getDate() + 42);
        var ReturnDate = new Date(ReturnInput);
        if (MaxReturnDate >= ReturnDate && MinReturnDate <= ReturnDate){
          if ($('.email input').val() != $('.confirm input').val() || $('.email input').val()== null || $('.email input').val() == '') {
            $('.Submit').hide();
          } else {
            $('.Submit').show();
          }
        } else {
          $('.Submit').hide();
        }
      }
    }
  });
  $('.ReturnDate input').on('change', function() {
    var DepartDate = $('.DepartDate input').val()
    if (DepartDate == null || DepartDate == ''){
      alert('hide1');
      $('.Submit').hide();
    } else {
      var ReturnDate = $('.ReturnDate input').val()
      if (ReturnDate == null || ReturnDate == ''){
        $('.Submit').hide();
      } else {
        var DepartDateVal = new Date(DepartDate);
        var DDateMin = $('.DepartDate input').attr('min').split("-");
        var DepartStart = new Date(DDateMin[1] + '/' + DDateMin[2] + '/' + DDateMin[0]);
        var DDateMax = $('.DepartDate input').attr('max').split("-");
        var DepartEnd = new Date(DDateMax[1] + '/' + DDateMax[2] + '/' + DDateMax[0]);
        if (DepartEnd >= DepartDateVal && DepartStart <= DepartDateVal){
          var ReturnDateVal = new Date(ReturnDate);
          var RDateMin = $('.ReturnDate input').attr('min').split("-");
          var ReturnStart = new Date(RDateMin[1] + '/' + RDateMin[2] + '/' + RDateMin[0]);
          var RDateMax = $('.ReturnDate input').attr('max').split("-");
          var ReturnEnd = new Date(RDateMax[1] + '/' + RDateMax[2] + '/' + RDateMax[0]);
          ReturnEnd.setDate(ReturnEnd.getDate() + 42);
          if (ReturnEnd >= ReturnDateVal && ReturnStart <= ReturnDateVal){
            if ($('.email input').val() != $('.confirm input').val() || $('.email input').val()== null || $('.email input').val() == '') {
              $('.Submit').hide();
            } else {
              $('.Submit').show();
            }
          } else {
            $('.Submit').hide();
          }
        } else {
          $('.Submit').hide();
        }
      }
    }
  }); 
});


 

0 0
replied on September 15, 2020

I found that the problem was with the Date Field format.  We had both dates set to format = M/d/yyyy.  This results in a momentpattern = "M/D/YYYY".  In the JavaScript, we are setting the min/max attributes with date format = yyyy-MM-dd.  This was causing problems with the moment date parsing.

To resolve the issue, I set both Date Field formats = MM/dd/yyyy

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.