AGENDAMENTO ONLINE PARA CLINICA

Ola galera boa noite

Estou fazendo um site para uma clinica de Odontológica

e nela terá agendamento online

montei o formulário que vai fazer o cadastros dos agendamentos

Porém quero que agenda apenas os horários e a data disponível

por ex: se o cliente for escolher

10/05/2018 - 14:00

se esta informações já estiver marcado por um outro cliente ele não poder fazer o mesmo agendamento da mesma data e horário

agora se ele for escolher agendar para 10/05/2019 - 14:55

ai ele conseguir fazer o agendamento dele..

Sei que tudo isso seria feito por javascript

não entendo bem de JAVASCRIPT

aqui esta o CÓDIGO do formulário que vai ficar no site

<!-- *** AGENDAMENTO ONLINE PARA CLINICA*** -->

 <div class="medilife-book-an-appoinment-area">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <div class="appointment-form-content">
 <div class="row no-gutters align-items-center">
 <div class="col-12 col-lg-9">
 <div class="medilife-appointment-form">
 <form action="#" method="post">
 <div class="row align-items-end">
 <div class="col-12 col-md-4">
 <div class="form-group">
 <select class="form-control" name="especialidade">
 <option>Especialidade 1</option>
 <option>Especialidade 2</option>
 <option>Especialidade 3</option>
 <option>Especialidade 4</option>
 <option>Especialidade 5</option>
 </select>
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="form-group">
 <select class="form-control" name="medicos">
 <option>Médico 1</option>
 <option>Médico 2</option>
 <option>Médico 3</option>
 <option>Médico 4</option>
 <option>Médico 5</option>
 </select>
 </div>
 </div>
 <div class="col-12 col-md-2">
 <div class="form-group">
 <input type="text" class="form-control" name="data" id="data" placeholder="Data">
 </div>
 </div>
 <div class="col-12 col-md-2">
 <div class="form-group">
 <input type="text" class="form-control" name="time" id="time" placeholder="Time">
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="form-group">
 <input type="text" class="form-control border-top-0 border-right-0 border-left-0" name="nome" id="nome" placeholder="Nome Completo">
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="form-group">
 <input type="text" class="form-control border-top-0 border-right-0 border-left-0" name="telefone" id="telefone" placeholder="Telefone">
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="form-group">
 <input type="email" class="form-control border-top-0 border-right-0 border-left-0" name="email" id="email" placeholder="E-mail">
 </div>
 </div>
 <div class="col-12 col-md-7">
 <div class="form-group mb-0">
 <textarea name="mensagem" class="form-control mb-0 border-top-0 border-right-0 border-left-0" id="mensagem" cols="30" rows="10" placeholder="Deixa aqui a sua mensagem"></textarea>
 </div>
 </div>
 <div class="col-12 col-md-5 mb-0">
 <div class="form-group mb-0">
 <button type="submit" class="btn medilife-btn">Enviar agendamento <span>+</span></button>
 </div>
 </div>
 </div>
 </form>
 </div>
 </div>

	Espero que possam me ajudar ai vlw....