<style>
.datepicker {
	z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}
</style>
<div class="form-horizontal">
   <div id="formProject">
        <div class="tab-content clearfix">
             <input type="text" id="txtTaskScheduleID" value="0" style="display:none">
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;" for="txtPlanStartTime" class="col-sm-2 control-label">Schedule Time</label>
                    <div class="col-sm-3">
                         <input readonly type="text" class="form-control" id="txtPlanStartTime" >
                    </div>
                    <label style="text-align:left;padding-left: 50px;" for="txtPlanActualStartDate" class="col-sm-2 control-label">Actual Start Time</label>
                    <div class="col-sm-2">
                         <input type="text" class="form-control" id="txtPlanActualStartDate" >
                    </div>
                    <div class="col-sm-2">
                         <div class="input-group bootstrap-timepicker timepicker">
                            <input id="txtPlanActualStartTime" 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;padding-left: 50px;" for="txtPlanEndTime" class="col-sm-2 control-label">Schedule Limit Time</label>
                    <div class="col-sm-3">
                         <input readonly type="text" class="form-control" id="txtPlanEndTime" >
                    </div>
                    <label style="text-align:left;padding-left: 50px;" for="txtPlanActualEndDate" class="col-sm-2 control-label">Actual End Time</label>
                    <div class="col-sm-2">
                         <input type="text" class="form-control" id="txtPlanActualEndDate" >
                    </div>
                    <div class="col-sm-2">
                         <div class="input-group bootstrap-timepicker timepicker">
                            <input id="txtPlanActualEndTime" 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;padding-left: 50px;" for="txtTaskSchedulePlanDesc" class="col-sm-2 control-label">Plan Desc</label>
                    <div class="col-sm-3">
                        <textarea id="txtTaskSchedulePlanDesc" readonly class="form-control" row="3"></textarea>
                    </div>
                    <label style="text-align:left;padding-left: 50px;" for="txtTaskSchedulePlanType" class="col-sm-2 control-label">Plan Type</label>
                    <div class="col-sm-2">
                        <input id="txtTaskSchedulePlanType" maxlength="20" type="text" readonly class="form-control">
                    </div>
                    <label style="display: none;" for="txtTaskSchedulePlanTolerance" class="col-sm-1 control-label">Plan Tolerance</label>
                    <div class="col-sm-2" style="display: none;">
                        <input id="txtTaskSchedulePlanTolerance" maxlength="20" type="text" readonly class="form-control">
                    </div>
                </div>
                <div class="form-group">
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;" for="txtTaskScheduleRemarks" class="col-sm-2 control-label">Remarks</label>
                    <div class="col-sm-3">
                         <textarea id="txtTaskScheduleRemarks" rows="3" class="form-control"></textarea>
                    </div>
                    <label style="text-align:left;padding-left: 50px;" for="cmbTaskScheduleResult" class="col-sm-2 control-label">Result</label>
                    <div class="col-sm-2">
                        <select id="cmbTaskScheduleResult" class="form-control">
                            <?php echo $this->getResultOption(); ?>
                        </select>
                    </div>
                </div>
        </div>
   </div>
</div>

<script>
$(document).ready(function () {
    $('#txtPlanActualStartDate').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtPlanActualStartDate').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

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

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

    $('#txtPlanActualEndTime').timepicker({
        minuteStep:1
    });
});
</script>