Edit, open dialog, customize time

by Akram kamal

HTML

<div id="tab">
    <button class="button">edit</button>
    <span class="close_time"></span> 
    <span class="open_time"></span>
</div>
<div class="dialog">
    <label>Timings</label>
<select id="edit_change_timings">
	<option value="0">Default Timings</option>
	<option  value="1">Custom Timings</option>
</select><br><br>
<label for="custom_timings">Custom Timings</label><br><br>
<b>From :</b>
<select id="edit_custom_timings_section">
<option value="00:00:00">00:00:00</option>
<option value="01:00:00">01:00:00</option>
<option value="02:00:00">02:00:00</option>
<option value="03:00:00">03:00:00</option>
<option value="04:00:00">04:00:00</option>
<option value="05:00:00">05:00:00</option>
<option value="06:00:00">06:00:00</option>
<option value="07:00:00">07:00:00</option>
<option value="08:00:00">08:00:00</option>
<option value="09:00:00">09:00:00</option>
<option value="10:00:00">10:00:00</option>
<option value="11:00:00">11:00:00</option>
<option value="12:00:00">12:00:00</option>
<option value="13:00:00">13:00:00</option>
<option value="14:00:00">14:00:00</option>
<option value="15:00:00">15:00:00</option>
<option value="16:00:00">16:00:00</option>
<option value="17:00:00">17:00:00</option>
<option value="18:00:00">18:00:00</option>
<option value="19:00:00">19:00:00</option>
<option value="20:00:00">20:00:00</option>
<option value="21:00:00">21:00:00</option>
<option value="22:00:00">22:00:00</option>
<option value="23:00:00">23:00:00</option>
</select>
<b>To :</b>
<select id="edit_custom_timings_section1">
<option value="00:00:00">00:00:00</option>
<option value="01:00:00">01:00:00</option>
<option value="02:00:00">02:00:00</option>
<option value="03:00:00">03:00:00</option>
<option value="04:00:00">04:00:00</option>
<option value="05:00:00">05:00:00</option>
<option value="06:00:00">06:00:00</option>
<option value="07:00:00">07:00:00</option>
<option value="08:00:00">08:00:00</option>
<option value="09:00:00">09:00:00</option>
<option...

CSS

div.dialog{
 display:none;   
}
#tab{
    height:20px;
    width:350px;
    background:rgba(0,0,0,.3);
}
#tab span{
    float:right;
}
#tab button{
    float:right;
}

JavaScript

$(".dialog").dialog({
    autoOpen: false,
      height: 270,
      width: 400,
      modal: true,
    draggable: true,
    resizable:false,
    show : 'slideDown',
    open: function(){
    $('#edit_custom_timings_section, #edit_custom_timings_section1').attr('disabled','disabled').css("color","rgba(0,0,0,.2)");
    }
  });
$('#edit_change_timings').change(function(){
if($('#edit_change_timings').val() == '1') {
$('#edit_custom_timings_section, #edit_custom_timings_section1').removeAttr('disabled').css("color","black");
} else {
$('#edit_custom_timings_section, #edit_custom_timings_section1').attr('disabled','disabled').css("color","rgba(0,0,0,.2)");
}
});
$('.button').click(function(){
    var defaultOTime = "06:00:00";
    var defaultCTime = "10:00:00";
    var open_time = $('.open_time').html();
    var close_time = $('.close_time').html();
    if(open_time){
			 $('#edit_change_timings').val('1');
			 $('#edit_custom_timings_section').val(open_time);
			 $('#edit_custom_timings_section1').val(close_time);
		}else{
			$('#edit_change_timings').val('0');
			$('#edit_custom_timings_section').val(defaultOTime);
			$('#edit_custom_timings_section1').val(defaultCTime);
	    }
$('.dialog').dialog('open');
});