-7

i have used a ready java script code for a time picker in an input html tag. in this code a desired string has added to date inputs and time picker appear by focus on any input that contains this string in my example this string is data-jdp. following is the sample code contains this string (data-jdp):

<input id="startDate" type="text" data-jdp />

do you know what is this? it is not id or class name! is it an desired attribute? what do you know any thing about this kind of attribute? how can i use it? how can connect a js function to inputs that contain this string?

hata.IR
  • 73
  • 5
  • 3
    It's a [`data-*` attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). This is a duplicate of https://stackoverflow.com/questions/33760520/how-can-i-get-the-values-of-data-attributes-in-javascript-code – esqew Sep 20 '22 at 21:43
  • yeh. but he teacher himself don know any thing about his question!!!! – hata.IR Sep 20 '22 at 21:55

1 Answers1

0

data-jdp is nothing but a data attribute of that input field.

These kinds of attributes with the prefix data- allow us to store extra information on the standard, semantic HTML elements. Refer to the MDN documentation for more information.

In Javascript, you can read out via a dataset property:

const startDate = document.querySelector("#startDate");
document.querySelector("#startDate").dataset.valueOf('data-jdp').jdp; // ""

In CSS with the attr() function:

article::before {
  content: attr(data-parent);
}

Reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Annamalai Palanikumar
  • 334
  • 4
  • 19