Capturing a value in a jQuery UI datepicker and alerting it back to the user

Question

I need your help.

How can some functionality be added onto the existing code below such that it will make the options below possible:

If the date1 field is blank and the user selects a date, an alert message will popup and say "User has selected [date]"
If the date1 field is not blank and the user selects a new date, an alert message will popup and say "User has change [old_date_value] to [new_date_value]

I am entirely new to jQuery, so go easy while criticizing me =\

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
  </style>
  <script type="text/javascript">
    window.onload = function() {
      $("#date1").datepicker({
        changeMonth: true,
        changeYear: true
      });
    }
  </script>
</head>
<body>
  <input type="text" id="date1">
</body>
</html>

score 2 · Accepted Answer · answered Jun 16 '15 at 19:24

Change the datepicker part of code to this:

var prevDate = null;
$("#date1").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(date) {
      if (prevDate === null) {
        alert('User has selected ' + date);  
      } else {
        alert('User has change ' + prevDate + ' to ' + date);
      }
      prevDate = date;
    }
});

You can find a suitable place to put the prevDate.

Also jQuery-datepicker would help you a lot.

score 1 · Answer 2 · answered Jun 16 '15 at 19:41

You'll want to use the onSelect option which is part of the datepicker. The onSelect function has two parameters, the dateText, which is the date string, and the datepicker instance. You can get the last value from the datepicker instance, as lastVal.

Using the above information, your javascript would look like this:

$("#date1").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText,inst) {
        if(dateText !== inst.lastVal){
            if (inst.lastVal == null) {
                alert("User has selected: "+dateText);
            } else {
                alert("User has change "+inst.lastVal+" to "+dateText)
            }
        }
    }
});

With this solution, you do not need to manage the previous date value in a variable, which is nice.

I've replicated your setup in jsFiddle so you can play around with this while you get used to jQuery.

I've upvoted your answer, but I want to know where I can find the documentation about that `lastVal`, thanks. — fuyushimoya, Jun 17 '15 at 02:00
You can output the inst object to the console by running `console.log(inst)` to see everything in that object, but yeah, the jQuery Documentation is lacking for that. I was able to find out about that variable from [other](http://stackoverflow.com/a/22454468/868531) [stackoverflow](http://stackoverflow.com/a/12307922/868531) [answers](http://stackoverflow.com/a/20776641/868531) — stevenviola, Jun 17 '15 at 16:08

Capturing a value in a jQuery UI datepicker and alerting it back to the user

2 Answers2