изменить фон и цвет поля ввода на основе даты с помощью moment.js - PullRequest
Новая
       6

изменить фон и цвет поля ввода на основе даты с помощью moment.js

0 голосов
/ 01 ноября 2018

Мне нужно изменить фон и цвет поля ввода, основываясь на дате, используя moment.js. Ниже приведен код, но он находит значение даты и затем не меняет цвет. Интересно, почему это не так. Я приму любой хороший ответ в javascript или jquery. 

var cccr_mems = [
    { "Name": "Ahmed, Jamshed", "cccrEXP": "2018.10.10" },
    { "Name": "Attaya, James J", "cccrEXP": "2019.01.12" },
    { "Name": "Badamo, Anthony", "cccrEXP": "2018.09.12" }]

function getExpireDate(ele) {
  var i = null;
  for (i = 0; cccr_mems.length > i; i++) {
    if (cccr_mems[i].Name == ele.value) {
      var exDate = moment(cccr_mems[i].cccrEXP, 'YYYY.MM.DD');

      // everything works except for this next "if" statement:  
      // I would rather reference the input date field by ID such as id = "CCCR_X1"
      if (moment().isAfter(exDate)) {
        $(ele).closest('.universal').find('.CCCRexpDate').css('color', "#A3005B");
      } else {
        $(ele).closest('.universal').find('.CCCRexpDate').css('color', "#275052");
      }
      // down to here.
      return cccr_mems[i].cccrEXP;
    }
  }
  return '';
}
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>

<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1"  /> 
<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X2"  /> 
<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X3"  />

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018 
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1"  />

и раздел JavaScript: 

document.getElementById(ele.id).style.backgroundColor="#275052"
0 голосов
/ 01 ноября 2018

это может помочь ссылка первого прохода элемента в getExpireDate 

<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1"  /> 
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X2"  /> 
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X3"  />

затем обновите getExpireDate 

function getExpireDate(ele) {
  var i = null;
  for (i = 0; cccr_mems.length > i; i++) {


  if (cccr_mems[i].Name == ele.value) {

     var exDate = moment(cccr_mems[i].cccrEXP, 'YYYY.MM.DD');

     if (moment().isAfter(exDate)) {
        //$(ele).css('color', "#A3005B");
        $(ele).css('background', "#A3005B");
     } else {
        $(ele).css('background', "#275052");
        //$(ele).css('color', "#275052");
  }

   return cccr_mems[i].cccrEXP;
  }
}
return '';

}

...