<div class="form-group">
		<label class="form-label mb-10 fs-14 text-dark fw-semibold">Date Picker</label>
		<input type="date" class="form-control">
	</div>

	<div class="form-group">
		<label class="form-label mb-10 fs-14 text-dark fw-semibold">Date Picker</label>
		<input type="date" class="form-control">
	</div>

	<div class="row">
		<div class="col-sm-6">
			<div class="form-group mb-4 mb-sm-0">
				<label class="form-label mb-10 fs-14 text-dark fw-semibold">Start Date Picker</label>
				<input type="date" class="form-control">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label class="form-label mb-10 fs-14 text-dark fw-semibold">End Date Picker</label>
				<input type="date" class="form-control">
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-6">
			<div class="form-group mb-4 mb-sm-0">
				<label class="form-label mb-10 fs-14 text-dark fw-semibold">Start Time Picker</label>
				<input type="time" class="form-control">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label class="form-label mb-10 fs-14 text-dark fw-semibold">End Time Picker</label>
				<input type="time" class="form-control">
			</div>
		</div>
	</div>

	<div class="calendar custom-calendar">
		<div class="header d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom border-color">
			<button class="border-0 px-3 rounded-1 btn-primary btn-primary-transparent" id="prevBtn">
				<i data-feather="chevron-left"></i>
			</button>
			<h4 class="fs-16" id="monthYear"></h4>
			<button class="border-0 px-3 rounded-1 btn-primary btn-primary-transparent" id="nextBtn">
				<i data-feather="chevron-right"></i>
			</button>
		</div>
		<div class="days d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
			<div class="day fs-12 fw-semibold">Sun</div>
			<div class="day fs-12 fw-semibold">Mon</div>
			<div class="day fs-12 fw-semibold">Tue</div>
			<div class="day fs-12 fw-semibold">Wed</div>
			<div class="day fs-12 fw-semibold">Thu</div>
			<div class="day fs-12 fw-semibold">Fri</div>
			<div class="day fs-12 fw-semibold">Sat</div>
		</div>
		<div class="dates" id="dates"></div>
	</div>

	
<script>
	// Custom Calendar Picker
	const monthYearElement = document.getElementById("monthYear");
	const datesElement = document.getElementById("dates");
	const prevBtn = document.getElementById("prevBtn");
	const nextBtn = document.getElementById("nextBtn");
	const months = [
		"January", "February", "March", "April", "May", "June",
		"July", "August", "September", "October", "November", "December"
	];
	let currentDate = new Date();
	function updateCalendar() {
		const month = currentDate.getMonth();
		const year = currentDate.getFullYear();
		monthYearElement.textContent = `${months[month]} ${year}`;
		const firstDay = new Date(year, month, 1).getDay();
		const daysInMonth = new Date(year, month + 1, 0).getDate();
		datesElement.innerHTML = "";
		for (let i = 0; i < firstDay; i++) {
			datesElement.innerHTML += "
";
		}
		for (let i = 1; i <= daysInMonth; i++) {
			datesElement.innerHTML += `
${i}
`;
		}
	}
	prevBtn.addEventListener("click", () => {
		currentDate.setMonth(currentDate.getMonth() - 1);
		updateCalendar();
	});
	nextBtn.addEventListener("click", () => {
		currentDate.setMonth(currentDate.getMonth() + 1);
		updateCalendar();
	});
	updateCalendar();
	
</script>

	<span class="fs-14 text-dark fw-semibold d-block mb-3">Current Date</span>
	<span id="digitalDate" class="fw-semibold fs-18 text-body border border-color p-3 rounded-3 d-block"></span>;

	
<script>
		// Current Date
		function updateDate() {
			var now = new Date();
			var date = now.getDate();
			var monthNames = ["January", "February", "March", "April", "May", "June",
			"July", "August", "September", "October", "November", "December"];
			var month = monthNames[now.getMonth()];
			var year = now.getFullYear();
			var digitalDate = document.getElementById("digitalDate");
			digitalDate.innerHTML = date + " " + month + " " + year;
		}
		setInterval(updateDate, 1000);
	
</script>

	<span class="fs-14 text-dark fw-semibold d-block mb-3">Current Time</span>
	<span id="time" class="fw-semibold fs-18 text-body border border-color p-3 rounded-3 d-block"></span>

	
<script>
		// Current Time
		function updateTime() {
			const currentTime = new Date();
			const hours = currentTime.getHours();
			const minutes = currentTime.getMinutes();
			const seconds = currentTime.getSeconds();

			// Format the time as HH:MM:SS
			const formattedTime = `${hours}:${minutes}:${seconds}`;

			// Display the time in the "time" element
			document.getElementById("time").textContent = ` ${formattedTime}`;
		}

		// Update the time initially and then every second
		updateTime();
		setInterval(updateTime, 1000);
	
</script>

	<span class="fs-14 text-dark fw-semibold d-block mb-3">Current Time</span>
	<span id="time" class="fw-semibold fs-18 text-body border border-color p-3 rounded-3 d-block"></span>

	
<script>
		// Current Date & Time
		// Function to update the current date and time
		function updateDateTime() {
			var currentDate = new Date();
			var datetimeElement = document.getElementById("datetime");
			datetimeElement.textContent = currentDate.toLocaleString();
		}
		// Call the updateDateTime function immediately to display the current date and time
		updateDateTime();
		// Set up a timer to update the date and time every second (1000 milliseconds)
		setInterval(updateDateTime, 1000);
	
</script>