:: moment():: jQuery转换并比较给定日期的输入值

时间:2019-03-18 09:45:02

标签: javascript jquery momentjs

我想用用户输入的值来检查日期(已打印),该值是“将来日期”或“过去日期”。

我将显示默认日期为2天,如果用户在给定的文本字段中输入1,则应显示为“ 过去”日期;或者,如果用户在提交的文本中输入3或更多,它应显示为“ 未来

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

$(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');
    }


  });

});
<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>

4 个答案:

答案 0 :(得分:1)

在比较之前,您需要创建一个带有日期的矩对象

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

例如

$(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');
    }


  });

});
<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>

答案 1 :(得分:1)

您的意思是这样的吗?输入数字(例如:1、2、3 ....)? 如果是这样,您只需要将输入的数字添加到当前日期,然后将其与显示的日期进行比较即可。

$(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');
    }


  });

});
<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>


否则,请检查其他人的答案,因为他们专注于日期输入。


免责声明:我对您的问题有些困惑。如果输入的内容为数字或日期,则为idd。

答案 2 :(得分:0)

这里的问题是myDateNew变量返回一个Date对象。 $('#inputDate').val()返回number。但是,按照您的问题,您只需要检查在输入字段中输入的值。我认为您想检查输入的值是大于还是小于myDateNew对象的日期。您必须致电myDateNew.getDate()才能返回日期。

 $(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');
        }
      });

});

答案 3 :(得分:0)

$(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);
  });

});
<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>