jQuery UI datepicker获取今天的日期或上一个日期

时间:2017-09-05 14:42:10

标签: jquery jquery-ui datepicker jquery-ui-datepicker

我正在使用jQuery UI datepicker,我试图在用户点击今天的日期或今天之前的任何上一个日期时显示提醒,但我不是&# 39;我知道如何,我设法检索每个日期的变更,但我不能做其余的事情,这是我今天选择日期的jQuery代码:

$(document).on("change", "#datepicker", function () {
    alert($(this).val())
})

2 个答案:

答案 0 :(得分:1)

    This code find currrent date and if block compare the selected date is current date or not and then prompt alert!

     <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
 var today = new Date();
var date = today.getDate();
var mnth = today.getMonth()+1; 

var yyyy = today.getFullYear();
if(date<10){
    date='0'+date;
} 
if(mnth<10){
    mnth='0'+mnth;
} 
var today = mnth+'/'+date+'/'+yyyy;
alert(today); // Display current date


  $(document).on("change", "#datepicker", function () {
         if($(this).val()<=today)
         {
         alert($(this).val())
         }
    });

  } );


  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

答案 1 :(得分:1)

您可以使用getDate方法简单地获取所选日期,并将其与当前时间进行比较。您可以使用JavaScript日期valueOf()获取:

  

1970年1月1日00:00:00 UTC与给定日期之间的毫秒数。

这是一份工作样本:

$('#datepicker').datepicker();

$(document).on("change", "#datepicker", function () {
  // Get datepicker value
  var selectedDate = $(this).datepicker( "getDate" );
  // Get current time
  var today = new Date().valueOf();
  // Compare current time and selected date
  if( selectedDate && selectedDate.valueOf() < today ){
    alert('You selected a past date: ' + $(this).val())
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<input type="text" id="datepicker">