recruitment/app/views/recruitments/employee_academics.html.erb

<%# content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
<%# end %>
<%# content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%= javascript_include_tag "lib/file-type" %>
<%# end %>
<style type="text/css">
  .header-title{
    text-align: center;
  }
  hr{
    border-top: 1px solid #5c5c5c;
  }
  hr.dotted{
    border-top: 1px dotted #5c5c5c;
  }
  .bootstrap-datetimepicker-widget ul{
    list-style: none;
    padding: 10px 25px;
    text-align: center;
  }
  .bootstrap-datetimepicker-widget ul td,th{
    cursor: pointer;
    text-align: center;
  }

  .bootstrap-datetimepicker-widget ul td.old, td.new{
    color: #cecece;
  }
  .bootstrap-datetimepicker-widget ul td:hover,th:hover{
    background-color: #5c5c5c;
    color: #fff;
  }
  
  .bootstrap-datetimepicker-widget span.month{
    width: 50px;
  }

  .default_picker span.add-on{
    padding: 3px;
    margin-left: 5px;
    cursor: pointer;
    height: 20px;
    width: 20px;
    text-align: center;
  }
</style>
<div id="dashboard-wrapper">
  <%= render :partial => "dashboard_header" %>
  <h3 class="header-title">Academics</h3>
  <hr>
  <% @academics.each do |academic| %>
    <div class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Academic Type</label>
        <div class="col-sm-10">
          <p class="form-control-static"><%= t("recruitment.academic_type.#{academic.academic_type}") %></p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Degree Name</label>
        <div class="col-sm-10">
          <p class="form-control-static"><%= academic.degree_name %></p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Start Date</label>
        <div class="col-sm-10">
          <p class="form-control-static"><%= academic.start_date.strftime("%d %B %Y") rescue "" %></p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">End Date</label>
        <div class="col-sm-10">
          <p class="form-control-static"><%= academic.end_date.strftime("%d %B %Y") rescue "" %></p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Note</label>
        <div class="col-sm-10">
          <%= simple_format(academic.note) %>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <a href="/recruit/<%= academic.id.to_s %>/edit_employee_academic" class="btn btn-warning">Edit</a>
        </div>
      </div>
    </div>
    <hr class="dotted">
  <% end %>
  <%= form_for @academic, :url => create_academic_path, :html => {:class => "form-horizontal", :id => "new-academics-form"} do |f| %>
    <%=  render :partial => "employee_academic_form",  locals: {f: f}  %>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <%= f.hidden_field :employee_profile_id, :value => @profile.profile.id.to_s %>
        <%= f.submit "Add", :class =>"btn btn-primary" %>
        <%= f.submit "Next", :class =>"btn btn-primary" %>
      </div>
    </div>
  <% end %>
</div>
<script type="text/javascript">
  $(function() {
     $("#new-academics-form").submit(function() {
        $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
        return true; // ensure form still submits
      });
  });
</script>