1

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!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
M. Obst
  • 11
  • 1
  • 1) This is most likely because either you have not included the jQueryUI css correctly, or the styles from it are being overridden by your own stylesheet. As you can see in the snippet I edited in to the question, it works fine with no other CSS applied. – Rory McCrossan Feb 17 '20 at 15:08
  • 2) When you coerce a Date object to a string you get the standard format. If you want to change that then you need to build the string manually, as the question you linked to shows. If you're having an issue with that we need to see the code so we can help you debug it – Rory McCrossan Feb 17 '20 at 15:09
  • @RoryMcCrossan thank you for reply. This is actually a bit strange to me...I've copied the code from https://jqueryui.com/datepicker/ once again and did not worked. I held the copy of the JS file in another folder, so there should be no incidental CSS style overrides. – M. Obst Feb 17 '20 at 20:50
  • Ensure to clear browser cache too, for potential lingering artifacts from previous handling. – Paul T. Feb 22 '20 at 21:11

0 Answers0