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

<div class="form-horizontal">
   <div id="formProject">
        <div class="row">
            <div class="form-group">
                <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPlanJobNumber" class="col-sm-2 control-label">Job Number</label>
                <div class="col-sm-3">
                    <select id="cmbPlanJobNumber" class="form-control">
                        <option value="">UAT0001</option>
                    </select>
                </div>
                <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPlanJobNumber" class="col-sm-2 control-label">Customer Rep.</label>
                <div class="col-sm-3">
                    <select id="cmbPlanJobNumber" class="form-control">
                    <option value="">SAI - Hasyim</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div style="padding-left: 30px;padding-right: 30px;">
                <table class="table" >
                    <thead>
                        <tr>
                            <th width="2%">No.</th>
                            <th width="8%">Phase</th>
                            <th width="20%">Task</th>
                            <th width="40%">Remarks</th>
                            <th width="5%">Check</th>
                          
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>
                                <select class="form-control" name="" id="">
                                    <option value="">1a</option>
                                    <option value="">1b</option>
                                    <option value="">1c</option>
                                </select>
                            </td>
                            <td><input class="form-control" type="text" value="Job centre task phase 1a"></td>
                            <td>
                                <textarea class="form-control" name="editor1" id="editor1" cols="20" rows="1"></textarea>
                                <textarea  class="form-control" name="editor1" id="editor1" cols="20" rows="1"></textarea>
                                <textarea class="form-control" name="editor1" id="editor1" cols="20" rows="1"></textarea>
                                <button style="float:right" class="btn btn-success">+</button>
                            </td>
                            <td><input  type="checkbox"></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>
                                <select class="form-control" name="" id="">
                                    <option value="">1b</option>
                                    <option value="">1a</option>
                                    <option value="">1c</option>
                                </select>
                            </td>
                            <td><input class="form-control" type="text" value="Job centre task phase 1b"></td>
                            <td>
                                <textarea class="form-control" name="editor2" id="editor2" cols="20" rows="1"></textarea>
                                <button style="float:right" class="btn btn-success">+</button>
                            </td>
                            <td><input  type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>

        <div class="row">
            <div style="padding-left: 30px;padding-right: 30px;">
            <table class="table" >
                    <thead>
                        <tr>
                            <th width="70%"></th>
                            <th width="5%"></th>
                          
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td><button style="float:right" class="btn btn-primary">Add Phase</button></td>
                        </tr>
                       
                    </tbody>
                </table>
            </div>
        </div>

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

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

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


</script>
