recruitment/app/views/recruitments/employee_experience.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">Work Experience</h3>
<hr>
<% @exeperiences.each do |exp| %>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">Company Name</label>
      <div class="col-sm-10">
        <p class="form-control-static"><%= exp.company_name %></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Job Title</label>
      <div class="col-sm-10">
        <p class="form-control-static"><%= exp.job_title %></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"><%= exp.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"><%= exp.end_date.strftime("%d %B %Y") rescue "Currently Working" %></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Responsibilities</label>
      <div class="col-sm-10">
        <%= simple_format(exp.responsibilities) %>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <a href="/recruit/<%= exp.id.to_s %>/edit_employee_experience" class="btn btn-warning">Edit</a>
      </div>
    </div>
  </div>
  <hr class="dotted">
<% end %>
<%= form_for @experience, :url => create_experience_path, :html => {:class => "form-horizontal", :id => "new-exp-form"} do |f| %>
  <%=  render :partial => "employee_experience_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 "Finish", :class =>"btn btn-primary" %>
    </div>
  </div>
<% end %>
</div>
<script type="text/javascript">
  $(function() {
     $("#new-exp-form").submit(function() {
        $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
        return true; // ensure form still submits
      });
  });
</script>