<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
script
src
=
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin
=
"anonymous"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
style
=
"max-width: 250px;"
>
<
div
class
=
"form-group m-1"
>
<
label
class
=
"font-weight-bold"
for
=
"dob"
>
Date of Birth:
</
label
>
<
div
class
=
"input-group date"
>
<
span
class
=
"input-group-prepend"
>
<
span
class
=
"input-group-text"
>
<
i
class
=
"fa fa-calendar"
onclick
=
"setDatepicker(this)"
>
</
i
>
</
span
>
</
span
>
<
input
class
=
"form-control"
type
=
"text"
name
=
"dob"
id
=
"dob"
value
=
""
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
function setDatepicker(_this) {
/* Get the parent class name so we
can show date picker */
let className = $(_this).parent()
.parent().parent().attr('class');
// Remove space and add '.'
let removeSpace = className.replace(' ', '.');
// jQuery class selector
$("." + removeSpace).datepicker({
format: "dd/mm/yyyy",
// Positioning where the calendar is placed
orientation: "bottom auto",
// Calendar closes when cursor is
// clicked outside the calendar
autoclose: true,
showOnFocus: "false"
});
}
</
script
>
</
body
>
</
html
>