1
votes

:: moment () :: jQuery Convertit et compare la valeur entrée avec la date donnée

Je veux vérifier la date (déjà imprimée) avec la valeur saisie par l'utilisateur est Date future ou Date passée.

J'affiche la date par défaut comme après 2 jours et si l'utilisateur entre 1 dans le champ de texte donné, il devrait dire comme Date " Passée " ou Si l'utilisateur entre 3 ou plus dans le texte déposé, il doit indiquer " Futur "

***** ***** FIDDLE ****** *****

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Date: <span id="myDate"></span>

<br>
<input type="text" name="inputDate" id="inputDate" value="" placeholder="Enter number">

<div id="compare">
Entered date is : <span id="dateCheck"></span>
</div>

$(document).ready(function() {

  var inputDate = jQuery(this).val();
  var myDateNew = moment().add(2, 'days').format('MMM DD, YYYY');  
  jQuery('#myDate').text(myDateNew);

  jQuery(document).on('keyup', '#inputDate', function () {

    if ($('#inputDate').val() > myDateNew) {
      jQuery('#dateCheck').text('Future');
    }

    else if ($('#inputDate').val() < myDateNew) {
      jQuery('#dateCheck').text('Past');
    }


  });

});

javascript jquery momentjs

0 commentaires

4 Réponses :

1
votes

Vous devez créer un objet moment avec votre date avant de le comparer

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Date: <span id="myDate"></span>

<br>
<input type="text" name="inputDate" id="inputDate" value="" placeholder="Enter number">

<div id="compare">
Entered date is : <span id="dateCheck"></span>
</div>

$(document).ready(function() {

  var inputDate = jQuery(this).val();
  var myDateNew = moment().add(2, 'days').format('MMM DD, YYYY');  
  jQuery('#myDate').text(myDateNew);

  jQuery(document).on('keyup', '#inputDate', function () {

    var diff = moment().add($('#inputDate').val(), 'days');
    if (diff > moment(myDateNew)) {
      jQuery('#dateCheck').text('Future');
    }

    else if (diff < moment(myDateNew)) {
      jQuery('#dateCheck').text('Past');
    }


  });

});

moment().add($('#inputDate').val(), 'days') > moment(myDateNew)

0 commentaires

1
votes

Voulez-vous dire quelque chose comme ça? Entrez un nombre (par exemple: 1, 2, 3 ....)? Si c'est le cas, il vous suffit d'ajouter votre numéro saisi à la date actuelle, puis de le comparer à la date affichée.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Date: <span id="myDate"></span>

<br>
<input type="text" name="inputDate" id="inputDate" value="" placeholder="Enter number">

<div id="compare">
Entered date is : <span id="dateCheck"></span>
</div>

$(document).ready(function() {

  var inputDate = jQuery(this).val();
  var myDateNew = moment().add(2, 'days').format('MMM DD, YYYY');  
  jQuery('#myDate').text(myDateNew);

  jQuery(document).on('keyup', '#inputDate', function () {
    var inputDate = moment().add($('#inputDate').val(), 'days').format('MMM DD, YYYY');
    if (inputDate > myDateNew) {
      jQuery('#dateCheck').text('Future');
    }

    else if (inputDate < myDateNew) {
      jQuery('#dateCheck').text('Past');
    } else {
   		jQuery('#dateCheck').text('Present');
    }


  });

});

Sinon, vérifiez la réponse d'autres personnes car elles se concentrent sur la saisie de la date.

Avertissement: Je suis légèrement confus avec votre question. Idk si l'entrée doit être un nombre ou une date.

0 commentaires

0
votes

Le problème ici est que la variable myDateNew renvoie un objet Date . Le $ ('# inputDate'). Val () renvoie un nombre . Mais suite à votre question, vous souhaitez uniquement vérifier les valeurs saisies dans le champ de saisie. Je pense que vous voulez vérifier si la valeur saisie est supérieure ou inférieure au jour de l'objet myDateNew . Vous devez appeler le myDateNew.getDate () qui retournera le jour.

 $(document).ready(function() {

      var inputDate = jQuery(this).val();
      var myDateNew = moment().add(2, 'days').format('MMM DD, YYYY');  
      jQuery('#myDate').text(myDateNew);

      jQuery(document).on('keyup', '#inputDate', function () {
        if ($('#inputDate').val() > myDateNew.getDate()) {
          jQuery('#dateCheck').text('Future');
        }
        else if ($('#inputDate').val() < myDateNew.getDate()) {
          jQuery('#dateCheck').text('Past');
        }
      });

});

0 commentaires

0
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
Date: <span id="myDate"></span>
<br/>   
<input type="text" name="inputDate" id="inputDate" value="" placeholder="Enter number" />
<div id="compare">
  Entered date is : <span id="dateCheck"></span>
</div>
</div>

$(document).ready(function() {
  var myDateNew = moment().add(2, 'days');
  $('#myDate').text(myDateNew.format('MMM DD, YYYY'));
  $('#inputDate').val(myDateNew.format('L'));
  var myDateNew = myDateNew.toDate();

  $(document).on('keyup', '#inputDate', function () {
    var inputDate = new Date($(this).val());
    var text = "";
    if (!inputDate || inputDate.toString() === "Invalid Date") {
      text = "Enter valid date";
    } else if (inputDate > myDateNew) {      
      text = 'Future';
    } else if (inputDate < myDateNew) {
      text = 'Past';
    } else {
      text = 'Now';
    }
    $('#dateCheck').text(text);
  });

});

0 commentaires