Pick a Date

by jonjieviduya

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.date.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.time.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div class="container mt-5">
	
	<div class="row">
		<div class="col">
			<label>Date</label>
			<input type="text" class="datepicker" readonly="">
		</div>
		<div class="col">
			<label>Time</label>
			<input type="text" class="timepicker">
		</div>
	</div>

	<div class="row">
		<div class="col">
			<div class="mt-4">
				<input type="text" id="dateValue">
			</div>
		</div>
		<div class="col">
			<div class="mt-4">
				<input type="text" id="timeValue">
			</div>
		</div>
	</div>
	
	<div class="row mt-4">
		<div class="col">
			<label>Doctor Id</label>
			<input type="text" value="2">
		</div>
	</div>

</div>

JavaScript

$(function() {

	let dates = [
		true, new Date("2021,06,21"), new Date("2021,06,22")
	]
	
	console.log(new Date('2021,06,21'))

	$('.datepicker').pickadate({
	  disable: dates,
	  onSet: function(context) {
	  	$('#dateValue').val(new Date(context.select).toLocaleDateString('fr-CA'))
	  }
	})
	
	
	$('.timepicker').pickatime({
		disable: [
			true,
			[8,00],
			[9,30],
			[10,00],
			[14,00]
		],
		interval: 60,
		onSet: function(timeContext) {
			let formattedTime = new Date(timeContext.select * 1000).toTimeString().replace(/.*(\d{2}:\d{2}).*/, "$1")
			$('#timeValue').val(formattedTime)
		}
	})

})