File "datepicker.ejs"

Full Path: /home/wiomgjqe/neduas.store/user-profiles/datepicker.ejs
File size: 2.64 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
			rel="stylesheet"
			type="text/css"
		/>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
		/>
		<title>Datepicker</title>

		<style>
			label {
				margin-left: 20px;
			}
			#datepicker {
				width: 180px;
			}
			#datepicker > span:hover {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<h1 class="text-success font-weight-bold m-5">Date Picker</h1>
			<h4>Select Date and You'll get the number format of that Date</h4>
			<label>Select Date: </label>
			<div
				id="datepicker"
				class="input-group date"
				data-date-format="mm-dd-yyyy"
			>
				<input
					id="dateSelector"
					data-format="dd/MM/yyyy hh:mm:ss"
					class="form-control"
					type="text"
					readonly
				/>
				<span class="input-group-addon">
					<i class="glyphicon glyphicon-calendar"></i>
				</span>
			</div>
			
			<div class="m-3">
			  <h3>Selected Date: <h4 id="dateFormat"></h4></h3>
			  <h3>Output: <h4 id="output"></h4></h3>
			</div>
		</div>

		<script
			src="https://code.jquery.com/jquery-3.6.1.min.js"
			integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
			crossorigin="anonymous"
		></script>

		<script>
			$(function () {
				$("#datepicker")
					.datepicker({
						autoclose: true,
						todayHighlight: true,
						todayBtn: "linked",
						title: "Geeksforgeeks datepicker",
						pick12HourFormat: true
					})
					.datepicker("update", new Date())
					.change(dateChanged)
					.on("changeDate", dateChanged);
			});
			function dateChanged(ev) {
				$(this).datepicker("hide");
				if ($("#startdate").val() != "" && $("#enddate").val() != "") {
					document.querySelector("#dateFormat").innerText = new Date(ev.target.value).toString();
					document.querySelector("#output").innerText = +new Date(ev.target.value);
				}
			}
		</script>
		<script
			src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
			integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
			crossorigin="anonymous"
		></script>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
			integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
			crossorigin="anonymous"
		></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
	</body>
</html>