Санкционировать даты с языком сценариев JavaScript

У меня есть проблема в момент санкционирования дат usandoJavaScript. У меня есть следующий формуляр:

<tr> 
    <td> 
        <input type="date" name="fecha1" value="<?php echo date($fecha1);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha2" value="<?php echo date($fecha2);?>"> 
    </td> 
</tr>

<tr>     
    <td> 
        <input type="date" name="fecha3" value="<?php echo date($fecha3);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha4" value="<?php echo date($fecha4);?>"> 
    </td> 
</tr>

Где я размещаю 4 даты.

Если база данных обладает вышеупомянутой датой, образцом, а он ничего не показывает.

Мое сомнение: В момент наполнения формуляра с датами, как я способствую, чтобы санкционировать тому, чтобы они не разместили себе даты, предыдущие уже загруженной, а именно, например:

Si fecha1 = x fecha 
fecha2 no debe ser menor a fecha1 
fecha3 no debe ser menor a fecha2 
fecha4 no debe ser menor a fecha3 

Возможно?

0
задан 05.05.2017, 13:50
0 ответов

Возможно делать повторяя поля, предыдущие тому, который издан в настоящее время и подтверждает даты.

Заметь: имей в виду, что в этом код я понимаю, что формат - Международная организация по стандартизации 8601 (yyyy-mm-dd).

let inputs = document.querySelectorAll('.input');

[].forEach.call(inputs, (input, i) => {
  input.addEventListener('input', () => {
    if (i > 0) {
      let curDate = new Date(input.value);
      [].forEach.call(inputs, (input2, k) => {
        if (k < i) { // solo recorremos inputs anteriores al actual
          let previousDate = new Date(input2.value);
          if (curDate.getTime() < previousDate.getTime()) {
            input.classList.add('invalid');
          } else {
            input.classList.remove('invalid');
          }
        }
      });
    }
  });
});
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.input {
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.075) inset;
  padding: .5rem .85rem;
  width: 0;
}
.input.invalid {
  border-color: #d53400;
}
.input:focus {
  outline: none;
}
form {
  margin: 20px auto;
  width: 400px;
}
form article {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
form article .input { 
  flex-basis: 45%;
  margin: 5px 0;
}
form footer {
  padding: .5rem 0;
  text-align: right;
}
.btn {
  background-color: #f2f2f2;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #555;
  padding: .5rem 1rem;
}
.btn.success {
  background-color: #2ecc71;
  color: #fff;
}
<form id="datesForm">
  <article>
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
  </article>
  <footer>
    <button class="btn success">Registrar</button>
  </footer>
</form>

В случае quiesies обрабатывать информацию с другим типом формата даты, ты был бы должен идентифицировать формат и обращать их в Международную организацию по стандартизации 8601, который является тем, которого понимает язык сценариев JavaScript. Однако, с Moment ты можешь делать себе самые легкие вещи.

let curDate = moment(input.value);
...
let previousDate = moment(input2.value);

if (curDate < previousDate) {
  input.classList.add('invalid');
} else {
  input.classList.remove('invalid');
}

В документации Moment ты можешь видеть принятые форматы дат.

1
ответ дан 03.12.2019, 17:39

Протестируй это.

Предполагается, что ты санкционируешь дату в частности с предыдущей, она первый дата будет должна идти по умолчанию, оставшаяся часть сравнивается предыдущей, я надеюсь, что то, что ты ищешь:

<tr> 
    <td> 
        <input type="date" name="fecha1" value="<?php echo date($fecha1);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha2" value="<?php 
            if ($fecha2 < $fecha1) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha2);
            }
        ?>"> 
    </td> 
</tr>

<tr> 
    <td> 
        <input type="date" name="fecha3" value="<?php 
            if ($fecha3 < $fecha2) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha3);
            }
        ?>">  
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha4" value="<?php 
            if ($fecha4 < $fecha3) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha4);
            }
        ?>"> 
    </td> 
</tr>
0
ответ дан 03.12.2019, 17:39
  • 1
    Это probé и функционируй, но то, в чем я нуждаюсь, состоит в том, чтобы пользователь, в момент ввождения даты в компьютер, получился бдительность, что я показал, что дата не правильна –  16.01.2017, 20:48
  • 2
    ты используешь событие в момент писания каждой буквы и обнаружив это стоившие. –  16.01.2017, 23:53

Я меняюсь в коде для того, чтобы он появился образно

<script type="text/javascript">

    //console.log(document.getElementsByName("fecha1"));

    function cambio (input) {

        var inputs = document.getElementsByTagName("input");

        console.log(input.value);

        var inputInt;

        for (var i = 0; i < inputs.length; i++) {

            if (inputs[i] == input) {

                inputInt = i;

            }

        }

        if (inputInt > 0) {

            if (inputs[inputInt -1].value > input.value) {

                input.style.background= "red";

            } else {

                input.style.background= "green";

            }

        } else {

            input.style.background= "green";

        }

    }

</script>

Все input они должны идти, таким образом.

<table>

    <tr> 
        <td> 
            <input type="date" name="fecha1" value="2000-05-05" onkeyup="cambio(this)" onclick="cambio(this)">
        </td> 
    </tr> 

    <tr> 
        <td> 
            <input type="date" name="fecha2" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
       </td> 
    </tr>

    <tr>
        <td> 
            <input type="date" name="fecha3" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
        </td> 
    </tr> 

    <tr> 
        <td> 
            <input type="date" name="fecha4" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
        </td> 
    </tr>

</table>

Как только ты увидел, что оно функционировало, измени стоимость input из-за твоих.

Заметь: если ты имеешь больше input было бы нужно делать утверждение для того, чтобы он только взял тебе эти 4, так как в функции JavaScript проверь все inputs.

0
ответ дан 03.12.2019, 17:39
  • 1
    Спасибо за ответ, но не меня está ничего не санкционируя. Я помещаю дату в первое поле, и когда я делаю одну предыдущей в следующем поле, он ничего не перемещает. –  17.01.2017, 15:22
  • 2
    Ahí только hací за консолью, я изменил có я говорю для того, чтобы он был grá fico, что sí функционируй, форма esté костариканская она не является очень подходящей, но уже ahí ты можешь adapatarla. Tambié n уже завись от тебя помещать action и возвращать false в твоем формуляре, когда будет validació n неправильная и не становитесь submit. Код сейчас функционирует правильно и появляется, когда дата не выполняет обязательное условие в có я говорю ответа –  17.01.2017, 16:55

Теги

Похожие вопросы