<style>
.datepicker {
    z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}

body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
   
    margin: 5 auto;
  }

</style>
<!-- fullcalendar UI -->
<input id="txtJobSchedulePlanCount" type="hidden" class="form-control input-small">
<div class="form-horizontal" style="margin-left:50px;">
                <div class="form-group">
                    <label style="text-align: left;min-width:100px;max-width:100px" for="cmbJobPlanSchedule" class="col-sm-1 control-label">Type</label>
                    <div class="col-sm-2" style="min-width:180px">
                        <select id="cmbJobPlanSchedule" class="form-control" onChange="generateJobPlanSchedule();">
                            <?php echo $this->getJobPlanScheduleOpt(); ?>
                        </select>
                    </div>

                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtJobPlanStart" class="col-sm-1 control-label"> Date</label>
                    <div class="col-sm-1" style="min-width:135px" >
                        <input id="txtJobPlanStart" maxlength="10" type="text" class="form-control" value="<?php echo date_create('now')->format('d/m/Y'); ?>" onkeydown="return false">
                    </div>
                    <label style="max-width:10px;" for="txtJobPlanEnd" class="col-sm-1 control-label">-</label>
                    <div class="col-sm-1" style="min-width:135px" >
                    
                        <input id="txtJobPlanEnd" maxlength="10" type="text" class="form-control" value="<?php echo date_create('now')->format('d/m/Y'); ?>" onkeydown="return false">
                    </div>
                    
                    <div class="col-sm-1" style="min-width:155px" >
                        <div class="input-group bootstrap-timepicker timepicker">
                            <input id="txtJobPlanTime" type="text" class="form-control input-small">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                        </div>
                    </div>

                    
                </div>
                <div class="form-group">
                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtPlanAssignAgent" class="col-sm-1 control-label">Agent</label>
                    <div class="col-sm-2" style="min-width:180px">
                        <select id="txtPlanAssignAgent" class="form-control">
                        <?php echo $this->getUserOption(); ?>
                        </select>
                    </div>
                    <label style="text-align: left;min-width:100px;max-width:100px" for="cobPlanCheckList" class="col-sm-1 control-label">Checklist</label>
                    <div class="col-sm-2" style="min-width:180px">
                        <select id="cobPlanCheckList" class="form-control">
                            <?php echo $this->getChecklistOption(); ?>
                        </select>
                    
                    </div>
                    <label style="text-align: left;min-width:100px;max-width:100px" for="cobPlanAssignEquiptment" class="col-sm-1 control-label">Equipment</label>
                    <div class="col-sm-2" style="min-width:210px">
                        <select id="cobPlanAssignEquiptment" class="form-control" >
                        
                        </select>
                    </div>
                    
                </div>
                <div class="form-group">
                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtPlanTask" class="col-sm-1 control-label">Task</label>
                    <div class="col-sm-2" style="min-width:180px">
                        <input id="txtPlanTask" type="text" class="form-control input-small">
                    </div>
                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtPlanSubs" class="col-sm-1 control-label">Sub Task</label>
                    <div class="col-sm-2" style="min-width:180px">
                        <input id="txtPlanSubs" type="text" class="form-control input-small">
                    </div>
                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtPlanScope" class="col-sm-1 control-label">Job Scope</label>
                    <div class="col-sm-2" style="min-width:210px">
                         <textarea style="resize: none;" id="txtPlanScope" rows="2" class="form-control txtPlanScope"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label style="text-align: left;min-width:100px;max-width:100px" for="txtPlanAllocatedHours" class="col-sm-1 control-label">Allocated Hours</label>
                    <div class="col-sm-1" style="max-width:80px">
                        <input id="txtPlanAllocatedHours" type="text" class="form-control input-small">
                    </div>
                </div>
                
                <div class="form-group" id="jobPlanSchedule">
                </div>
                   
</div>
    
<hr/>
<script>
$(document).ready(function () {
  
    
    $('#txtJobPlanStart').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtJobPlanStart').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

    $('#txtJobPlanEnd').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtJobPlanEnd').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

    $('#txtJobPlanTime').timepicker({
        minuteStep:1
    });

});
</script>

