Home » Jquery » javascript – Problem to solve with datepicker date format

javascript – Problem to solve with datepicker date format

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am trying to change the output format of the date in my programme. I am quite new to JS and would like to make my test site more appealing. I have 2 questions:

1) Why the jQuery datepicker calendar layout is so awful in my browser? Is it about the Firefox plugins I miss or other issue? Here looks more appealing.

2) I was constantly looking for a solution how to change the date output format in my code using How to format a JavaScript date topic, but any function I overlay on the date I get from date picker is not providing any result on the site.

$(function() {
  $("#datepicker").datepicker();
});

function check() {
  var date;
  var installment = document.getElementById("number_months").value; // saves field value
  date = $("#datepicker").datepicker("getDate"); // saves the date from date picker
  date.setMonth(installment); // adds the installment months to stored date object
  document.getElementById("day").innerHTML = date; // prints output on site
}
<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>

<div>Date: <input type="text" id="datepicker"></div>
<br></br>
<div>Number of installment: <input type="text" id="number_months"> </div>
<br></br>
<input type="submit" id="button" value="Check" onclick="check()" />
<p id="day"> </p>

Would be greateful for help!

How to&Answer: