add timepicker plugin and fix its conflict

app/assets/stylesheets/custom_field.css

@@ -0,0 +1,20 @@
+input[type=checkbox] {
+  font-size: 1em;
+  -webkit-appearance: none;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 5px;
+  margin: 0.2em;
+  border: 0.12em solid;
+}
+input[type=checkbox]:checked {
+  background: #90b8d9;
+}
+input[type=checkbox]:focus {
+  outline: none;
+}
+@media (max-width: 768px){
+  .ask-question .control-group{
+    justify-content: center;
+  }
+}

app/assets/stylesheets/jquery-ui-timepicker-addon.css

@@ -0,0 +1,39 @@
+.default_picker > *{
+  display: none;
+}
+.default_picker > input{
+  display: inline-block;
+}
+select.ui-timepicker-select.ui-state-default.ui-corner-all {
+  width: auto;
+}
+.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+.ui-timepicker-div dl { text-align: left; }
+.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
+.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
+.ui-timepicker-div td { font-size: 90%; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
+
+.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
+.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
+
+.ui-timepicker-rtl{ direction: rtl; }
+.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
+.ui-timepicker-rtl dl dt{ float: right; clear: right; }
+.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
+
+/* Shortened version style */
+.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
+.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
+.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

app/helpers/admin/asks_helper.rb

@@ -57,20 +57,20 @@ module Admin::AsksHelper
     case v['format']
     when 'format1'
       t1 = text_field_tag("#{field_name}[datetime][date][#{i}]",(value['datetime']['date']["#{i}"] rescue nil),{:required => v['required']=='true',autocomplete: 'off',placeholder: t('ask.datepicker'),style:'width:100%;'})
-      t2_value = value['datetime']['h']["#{i}"] rescue nil
-      t3_value = value['datetime']['m']["#{i}"] rescue nil
-      t2 = select_tag("#{field_name}[datetime][h][#{i}]",options_for_select((1..24).collect{|v1| v1.to_s.rjust(2, "0")},selected: t2_value))
-      t3 = select_tag("#{field_name}[datetime][m][#{i}]",options_for_select((0..59).collect{|v1| v1.to_s.rjust(2, "0")},selected: t3_value))
-      t4 = "#{t2}<b style=\"padding: 0 0.1em;\">:</b>#{t3}"
-      "<div class=\"datetime_selector\" style=\"display: inline-flex;\">#{t1}<div class=\"time_selector\" style=\"width:100%;\">#{t4}</div></div>
+      #t2_value = value['datetime']['h']["#{i}"] rescue nil
+      #t3_value = value['datetime']['m']["#{i}"] rescue nil
+      #t2 = select_tag("#{field_name}[datetime][h][#{i}]",options_for_select((1..24).collect{|v1| v1.to_s.rjust(2, "0")},selected: t2_value))
+      #t3 = select_tag("#{field_name}[datetime][m][#{i}]",options_for_select((0..59).collect{|v1| v1.to_s.rjust(2, "0")},selected: t3_value))
+      #t4 = "#{t2}<b style=\"padding: 0 0.1em;\">:</b>#{t3}"
+      "<div class=\"datetime_selector\">#{t1}</div>
         <script>
           jQuery(document).ready(function( $ ) {
-            $(\"input[name='#{field_name}[datetime][date][#{i}]']\").ui_datepicker();
+            $(\"input[name='#{field_name}[datetime][date][#{i}]']\").ui_datetimepicker({controlType: 'select',timeInput: true,oneLine: true,timeFormat: 'HH:mm'});
           })
         </script>".html_safe
     when 'format2'
       t1 = text_field_tag("#{field_name}[datetime][date][#{i}]",(value['datetime']['date']["#{i}"] rescue nil),{:required => v['required']=='true',autocomplete: 'off',placeholder: t('ask.datepicker')})
-      "<div class=\"datetime_selector\" style=\"display: inline-flex;\">#{t1}</div>
+      "<div class=\"datetime_selector\">#{t1}</div>
         <script>
           jQuery(document).ready(function( $ ) {
             $(\"input[name='#{field_name}[datetime][date][#{i}]']\").ui_datepicker();

app/views/admin/asks/_form.html.erb

@@ -5,6 +5,7 @@
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "lib/main-forms" %>
   <%= stylesheet_link_tag "lib/main-list" %>
+  <%= stylesheet_link_tag "custom_field" %>
 <% end %>
 <%# javascript_include_tag "lib/bootstrap-datetimepicker.js" %>
 <%# javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"%>
@@ -13,23 +14,9 @@
 <%= javascript_include_tag "jquery.ui.datepicker.monthyearpicker" %>
 <%# javascript_include_tag "lib/bootstrap-datetimepicker" %>
 <style type="text/css">
-	.time_selector{
-    display: inline-flex;
-  }
-  .input-area tr td {
+	.input-area tr td {
 		text-align: center;
 	}
-  @media (max-width: 768px){
-    .ask-question .control-group{
-      justify-content: center;
-    }
-    .time_selector{
-      display: inline-flex;
-    }
-    .datetime_selector{
-      flex-direction: column;
-    }
-  }
 </style>
 <div class="input-area">
 	<div id="ask-asks">

app/views/asks/index.html.erb

@@ -7,15 +7,16 @@
   ask_setting = AskSetting.create() if ask_setting.nil?
   set_input_name('ask_question')
 %>
-
-<%= stylesheet_link_tag "basic/bootstrap-datetimepicker" %>
 <style type="text/css">
+  #new-ask-question .form-horizontal .control-group > *{
+    font-size: 1.5em;
+  }
   .default_picker label{
     display: none;
   }
   .ask-question .control-group{
     flex-wrap: wrap;
-    display: inline-flex;
+    display: flex;
     width: 100%;
     align-items: center;
   }
@@ -54,29 +55,16 @@
     padding: 1em 0 0 0;
     text-align: center;
   }
-  .time_selector{
-    display: inline-flex;
-  }
-  @media (max-width: 768px){
-    .ask-question .control-group{
-      justify-content: center;
-    }
-    .time_selector{
-      display: inline-flex;
-    }
-    .datetime_selector{
-      flex-direction: column;
-    }
-  }
 </style>
 <%= javascript_include_tag "/assets/lib/jquery-ui-1.12.1/jquery-ui.min" %>
 <%= stylesheet_link_tag "/assets/lib/jquery-ui-1.12.1/jquery-ui.min" %>
+<%= stylesheet_link_tag "custom_field" %>
+<%= stylesheet_link_tag "jquery-ui-timepicker-addon" %>
 <script type="text/javascript">
   var datepicker_fn = $.fn.datepicker
   var datepicker = $.datepicker
-  var a = 1
 </script>
-<%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
+<%# javascript_include_tag "lib/bootstrap-datetimepicker" %>
 <%= javascript_include_tag "jquery.ui.datepicker.monthyearpicker" %>
 
 <%= javascript_include_tag 'validator' %>

app/views/layouts/back_end_with_jquery_first.html.erb

@@ -5,4 +5,5 @@
   var datepicker_fn = jq.fn.datepicker
   var datepicker = jq.datepicker
 </script>
-<%= render :template => 'layouts/back_end' %>
+<%= render :template => 'layouts/back_end' %>
+<%= stylesheet_link_tag "jquery-ui-timepicker-addon" %>