<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> <link href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <h2>Randevunuzu Oluşturun</h2> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Randevu Talep Formu</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="r_adsoyad">Ad Soyad</label> <div class="col-md-4"> <input id="r_adsoyad" name="r_adsoyad" type="text" placeholder="Ad Soyad" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="r_pasaportno">Pasaport No</label> <div class="col-md-4"> <input id="r_pasaportno" name="r_pasaportno" type="text" placeholder="Pasaport No" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="r_email">E-posta</label> <div class="col-md-4"> <input id="r_email" name="r_email" type="text" placeholder="E-posta" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="r_telefon">Telefon</label> <div class="col-md-4"> <input id="r_telefon" name="r_telefon" type="text" placeholder="Telefon" class="form-control input-md" required=""> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="r_adres">Adres</label> <div class="col-md-4"> <textarea class="form-control" id="r_adres" name="r_adres">açık adresiniz</textarea> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="r_ofis">Ofis Seçin</label> <div class="col-md-4"> <select id="r_ofis" name="r_ofis" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="r_randevutarihi">Randevu Tarihi</label> <div class="col-md-4"> <div class="input-group date"> <input id="r_randevutarihi" name="r_randevutarihi" placeholder="Randevu Tarihi" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> <div id="timecontainer" class="hide"> <div class="avails"> <span class="colum"> <label class="radio-inline noselecttext" for="r_times-0"> 10:00 </label> </span> <span class="colum"> <label class="radio-inline noselecttext" for="r_times-1"> 10:10 </label> </span> <span class="colum"> <label class="radio-inline noselecttext active" for="r_times-2"> 10:20 </label> </span> <span class="colum"> <label class="radio-inline noselecttext" for="r_times-3"> 10:25 </label> </span> <span class="colum"> <label class="radio-inline noselecttext" for="r_times-3"> 10:35 </label> </span> <span class="colum"> <label class="radio-inline noselecttext" for="r_times-3"> 10:45 </label> </span> </div> </div> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group hide"> <label class="col-md-4 control-label" for="r_times">Randevu Saati</label> <div class="col-md-4"> <label class="radio-inline" for="r_times-0"> <input type="radio" name="r_times" id="r_times-0" value="1" checked="checked"> 1 </label> <label class="radio-inline" for="r_times-1"> <input type="radio" name="r_times" id="r_times-1" value="2"> 2 </label> <label class="radio-inline" for="r_times-2"> <input type="radio" name="r_times" id="r_times-2" value="3"> 3 </label> <label class="radio-inline" for="r_times-3"> <input type="radio" name="r_times" id="r_times-3" value="4"> 4 </label> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="r_btnsend">Gönder</label> <div class="col-md-4"> <button id="r_btnsend" name="r_btnsend" class="btn btn-primary">Gönder</button> </div> </div> </fieldset> </form> </div> </div>

#timecontainer{ background: #DBEEFF; margin: 5px 0; border: solid 1px #B4D2EC; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; } #timecontainer .avails{ padding: 10px; } #timecontainer .timerinfo{ margin: 0; background: #337AB7; padding: 10px; color: white; } #timecontainer .colum{ display: block; float: left; width: 25%; height: 50px; background: none; margin: 0; padding: 0 0 5px 0; overflow: hidden; } #timecontainer .colum label{ display: block; background: #FF5722; margin: 0 5px 0; height: 100%; border: solid 1px #FFFFFF; color: #E5DDDD; padding: 7px 0 0; text-align: center; box-shadow: 0px 0px 2px #4D4C4B; border-radius: 2px; } #timecontainer .colum label input[type=radio]{ display: none; } #timecontainer .colum label.active { background: #4D4C4B; } #timecontainer .colum label.active:after{ position: relative; top: -2px; display: block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e013"; text-shadow: 1px 1px 1px #4D4C4B; } .noselecttext { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ }

$(document).ready(function(){ $("#r_btnsend").on("click",function(){ alert("ss"); }); $("#r_randevutarihi").datepicker({ autoclose: true, todayHighlight: true }).on("input change", function (e) { $("#timecontainer").prepend("<div class='timerinfo'>" + e.target.value + " Tarihindeki Müsait Saatler.</div>").removeClass("hide"); }); $("#timecontainer label").click(function(){ $("#timecontainer label").removeClass("active"); $(this).addClass("active"); }); });