DataetimepickerInJuty

app/assets/javascripts/application.js

@@ -22,6 +22,10 @@
 //= require bootstrap-datepicker
 //= require jquery.datetimepicker
 //= require dataTables/jquery.dataTables
+//= require moment
+//= require bootstrap-datetimepicker
+//= require pickers
+
 
 $(document).on('turbolinks:load', function() {
   $('.datepicker').datepicker({

app/assets/javascripts/origami.js

@@ -6,6 +6,7 @@
 //= require cable
 //= require jquery-ui
 //= require bootstrap-datepicker
+//= require jquery.datetimepicker
 
 $(document).ready(function(){
 	// auto refresh every 60 seconds

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import "bootstrap-datepicker3";
 @import "jquery.datetimepicker";
 @import "dataTables/jquery.dataTables";
+@import "bootstrap-datetimepicker";
 
 /* Show it is fixed to the top */
 // body {

app/assets/stylesheets/origami.scss

@@ -4,6 +4,8 @@
 @import "jquery-ui";
 @import "bootstrap-datepicker3";
 
+@import "jquery.datetimepicker";
+
 /* Show it is fixed to the top */
 // body {
 //   min-height: 75rem;

app/inputs/date_picker_input.rb

@@ -0,0 +1,66 @@
+class DatePickerInput < SimpleForm::Inputs::StringInput
+  def input(wrapper_options)
+    set_html_options
+    set_value_html_option
+
+    template.content_tag :div, class: 'input-group date datetimepicker' do
+      input = super(wrapper_options) # leave StringInput do the real rendering
+      input + input_button
+    end
+  end
+
+  def input_html_classes
+    super.push ''   # 'form-control'
+  end
+
+  private
+
+  def input_button
+    template.content_tag :span, class: 'input-group-btn' do
+      template.content_tag :button, class: 'btn btn-default', type: 'button' do
+        template.content_tag :span, '', class: 'fa fa-calendar'
+      end
+    end
+  end
+
+  def set_html_options
+    input_html_options[:type] = 'text'
+    input_html_options[:data] ||= {}
+    input_html_options[:data].merge!(date_options: date_options)
+  end
+
+  def set_value_html_option
+    return unless value.present?
+    input_html_options[:value] ||= I18n.localize(value, format: display_pattern)
+  end
+
+  def value
+    object.send(attribute_name) if object.respond_to? attribute_name
+  end
+
+  def display_pattern
+    I18n.t('datepicker.dformat', default: '%d/%m/%Y')
+  end
+
+  def picker_pattern
+    I18n.t('datepicker.pformat', default: 'DD/MM/YYYY')
+  end
+
+  def date_view_header_format
+    I18n.t('dayViewHeaderFormat', default: 'MMMM YYYY')
+  end
+
+  def date_options_base
+    {
+        locale: I18n.locale.to_s,
+        format: picker_pattern,
+        dayViewHeaderFormat: date_view_header_format
+    }
+  end
+
+  def date_options
+    custom_options = input_html_options[:data][:date_options] || {}
+    date_options_base.merge!(custom_options)
+  end
+
+end

app/inputs/datetime_picker_input.rb

@@ -0,0 +1,13 @@
+class DatetimePickerInput < DatePickerInput
+  private
+
+  def display_pattern
+    I18n.t('datepicker.dformat', default: '%d/%m/%Y') + ' ' +
+        I18n.t('timepicker.dformat', default: '%R')
+  end
+
+  def picker_pattern
+    I18n.t('datepicker.pformat', default: 'DD/MM/YYYY') + ' ' +
+        I18n.t('timepicker.pformat', default: 'HH:mm')
+  end
+end

app/inputs/time_picker_input.rb

@@ -0,0 +1,15 @@
+class TimePickerInput < DatePickerInput
+  private
+
+  def display_pattern
+    I18n.t('timepicker.dformat', default: '%R')
+  end
+
+  def picker_pattern
+    I18n.t('timepicker.pformat', default: 'HH:mm')
+  end
+
+  def date_options
+    date_options_base
+  end
+end

app/views/origami/in_juties/_assign_in_juty.html.erb

@@ -14,10 +14,10 @@
     
     <label>Commissioner Name:</label>
     <%= f.collection_select :commissioner_ids, Commissioner.all, :id, :name, {prompt: 'Select Commissioner'}, {class: 'form-control'} %><br/><br/>
-    <label>In time</label>
-         <%= f.text_field :in_time, :value=>'',:class=>"form-control datepicker"%><br/>
-     <label>Out time</label>
-         <%= f.text_field :out_time, :value=>'',:class=>"form-control datepicker"%>
+    
+         <%= f.input  :in_time, :placeholder => "From Date" , :class => "form-control", :as => :datetime_picker%>
+     
+         <%= f.input  :out_time, :placeholder => "From Date" , :class => "form-control", :as => :datetime_picker%>
   </div><br>
   
    <div class="form-group">
@@ -31,20 +31,16 @@
 
 <script type="text/javascript">
 
-$(function() {
-    $('.datepicker').datepicker({
-        format : 'yyyy-mm-dd',
-        autoclose: true
-    });
-    $('.datepicker').attr('ReadOnly','true');
-    $('.datepicker').css('cursor','pointer');
-});
-
-$('#reset').click(function() {
+$(document).ready(function(){
+  // $('#in_juty_in_time').datetimepicker();
+  // $('#in_juty_out_time').datetimepicker();
+  $('#reset').click(function() {
 
     // window.location.href = '/origami/assign_in_juty/'+ table_id;
     location.reload();
 
     return false;
   });
+});
+
 </script>