Datepicker getData() resulting in null-CodePudding

I'm new with datepickers, and in order to get a date picked by a user I'm using the function getData(), I've seen a lot of examples of people using this function and getting the date picked by the user correctly, however, when I use it and the console.log the result, it comes out as null, here's my HTML and JS for this datepicker

HTML:

<label for="datePickerOrders" >Date:</label>
  <input type="date" id="dateFood"  name="datePickerOrders">

JS:

$(".datePickerOrders").change(async (event) => {

  const dateSelected = $(".datePickerOrders").datepicker("getDate");
  console.log(dateSelected);

});

I was expecting that the date picked was actually logged in the console, however, the output is Null

CodePudding user response：

From the official document, it returns null if no date has been selected. Therefore, check if you selected a date from it.

It looks like the getDate() works properly as it returns null, because if the Datepicker couldn't find the DOM element, then it will return undefined

CodePudding user response：

I think you meant to say getDate(). Here's a snippet that uses the getDate() function on a Date object.

const datePicker = document.querySelector('.datePickerOrders');

datePicker.addEventListener('change', () => {
  let date = new Date(datePicker.value);
  console.log(date.toDateString());
})

<label for="datePickerOrders" >Date:</label>
<input type="date" id="dateFood"  name="datePickerOrders">