0

In an HTML form I have jQuery DatePicker (taken from this site) for start date and end date. This works well: DatePicker popup shows and dates selected. Now I have to send these dates to dbase to get records between start date and end date. How can I extract from jQuery date variables and how to print also in HTML to inform user this date selected by them.

<p>You entered start date as:  <input type="text" id="date_id"/></p>

and in JS:

$('#date_id').html(input.value);

But I am not printing anything on HTML. What am I doing wrong?

Heretic Monkey
  • 10,498
  • 6
  • 45
  • 102
TheTrump
  • 5
  • 2

1 Answers1

1

You did not say so I assumed jQuery UI datepicker. Here I show how to get that start/end date into another input. I used a class to set all date pickers up. 

// setup the date picker
$('.datething').datepicker();
// on change, show what was choosen
$('.datething').on('change', function() {
  // minimal super simple example of validation using moment.js
  var myformat = 'MM/DD/YYYY';
  var checkdate = moment($(this).val(), 'MM/DD/YYYY', true);
  var isvalid = checkdate.isValid();
  $('.isvaliddate').toggle(!isvalid);
  $('.valueentered').text(isvalid ? "" :'"'+myformat+'"  value:"'+ $(this).val()+'"');
  // which one changed based on a class
  if (isvalid && $(this).is('.startdate')) {
    $('#date_idstart').val($(this).val());
  }
  if (isvalid && $(this).is('.enddate')) {
    $('#date_idend').val($(this).val());
  }
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label>Start:<input class="datething startdate" /></label>
<label>End:<input class="datething enddate" /></label>
<p>You entered start date as: <input type="text" id="date_idstart" /></p>
<p>You entered end date as: <input type="text" id="date_idend" /></p>
<p class="isvaliddate">Value entered format:<span class='valueentered'></span> detected as invalid date</p>

Other things to do: make sure the start is before the end. Add that to your database code whatever that is.

Note pushing the dates to ANOTHER input does seem a bit redundant on the UI end to me, they can see in the inputs what they have but if that is your requirement then OK.

Building on the above, get the dates

var myobject = myobject || {};
myobject.datedata = {
  isValid: false,
  isStartValid: false,
  isEndValid: false,
  isStartBeforeEnd: false,
  startDate: undefined,
  endDate: undefined,
  get bothdates() {
    return {
      "startdate": this.startDate,
      "enddate": this.endDate
    }
  },
  postDates: function() {
    var data = JSON.stringify(this.bothdates);
    console.log(data);
    var myurl = "https://example.com/something";
    // example of an ajax post:bad url will not work here :)
    $.ajax({
        url: myurl,
        type: "POST",
        data: data
      }).done(function(data) {
        // posted 
        if (console && console.log) {
          console.log("Sample of data:", data);
        }
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        // post messed up
        if (console && console.log) {
          console.log("Ooops:", textStatus,errorThrown);
        }
      });
  }
};
// setup the date picker
$('.datething').datepicker();
// on change, show what was choosen
$('.datething').on('change', function() {
  // minimal super simple example of validation using moment.js
  var myformat = 'MM/DD/YYYY';
  var checkdate = moment($(this).val(), 'MM/DD/YYYY', true);
  //console.log(checkdate);
  var isvalid = checkdate.isValid();
  //$('.isvaliddate').toggle(!isvalid);
  $('.isvaliddate').toggle(true);
  $('.valueentered').text(isvalid ? "{"+checkdate.format('LL') +")": '"' + myformat + '"  value:"' +checkdate.format('LL') + '"');
  // which one changed based on a class
  if (isvalid && $(this).is('.startdate')) {
    myobject.datedata.startDate = checkdate;
    $('#date_idstart').val($(this).val());
  }
  if (isvalid && $(this).is('.enddate')) {
    myobject.datedata.endDate = checkdate;
    $('#date_idend').val($(this).val());
  }
  //console.log(myobject.datedata);
  //console.log(JSON.stringify(myobject.datedata.bothdates));
  myobject.datedata.postDates();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label>Start:<input class="datething startdate" /></label>
<label>End:<input class="datething enddate" /></label>
<p>You entered start date as: <input type="text" id="date_idstart" /></p>
<p>You entered end date as: <input type="text" id="date_idend" /></p>
<p class="isvaliddate">Value entered format:<span class='valueentered'></span> detected as invalid date</p>
Mark Schultheiss
  • 28,892
  • 9
  • 63
  • 88
  • Thanks much. actually i wanted checkpoint date narration to be long form. like "You entered start date as January 16, 2018" just to be sure, instead of 01/16/2018 which Asia will make mistake. How format that second time? I have green-ticked your answer but it do not add up because I don't have many questions on your site. – TheTrump Jan 30 '18 at 06:54
  • @TheTrump Formatting the date is another question, perhaps this one will give you that https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date – Mark Schultheiss Jan 30 '18 at 13:51
  • Note: I added `checkdate.format('LL')` using momentjs in the second example. It has several localization options see here http://momentjs.com/ – Mark Schultheiss Jan 30 '18 at 14:19