Date picker separated: reset time when reset date

app/assets/javascripts/datetimepicker.js

@@ -11,7 +11,24 @@ $(document).ready(function(){
   });
 
   $('.separated_picker div').on("changeDate",function(){
+    if ($(this).hasClass('date_picker'))
+    {
+      if ($(this).find('input').val())
+      {
+
+      }
+      else
+      {
+        $(this).siblings('div').find('input').val(null);
+        $(this).siblings('div').disabled = true;
+        $(this).siblings('div').unbind('click');
+      }
+    }
     $(this).siblings('input').val($(this).find('input').val() + ' ' + $(this).siblings('div').find('input').val());
   });
 
+  // $('.date_picker').on("changeDate",function(){
+  //   $(this).find('input').val('');
+  // });
+
 });

app/assets/javascripts/lib/bootstrap-datetimepicker.js

@@ -46,8 +46,9 @@
       this.pickDate = options.pickDate;
       this.pickTime = options.pickTime;
       this.isInput = this.$element.is('input');
-      // this.component = this.$element.is('.input-prepend') ? this.$element.find('.add-on') : false;
+      // this.component = this.$element.is('.input-prepend') ? this.$element.find('.iconbtn') : false;
-      this.component = this.$element.is('.input-append') ? this.$element.find('.add-on') : false;
+      this.component = this.$element.is('.input-append') ? this.$element.find('.iconbtn') : false;
+      this.clearDate = this.$element.is('.input-append') ? this.$element.find('.clearDate') : false;
       this.format = options.format;
       if (!this.format) {
         if (this.isInput) this.format = this.$element.data('format');
@@ -215,7 +216,7 @@
           input = this.$element.find('input');
       this.widget.css({
         top: offset.top + this.height,
-        left: offset.left - input.outerWidth(),
+        left: offset.left - input.outerWidth() - this.width,
       });
     },
 
@@ -694,6 +695,12 @@
       this._resetMaskPos(input);
     },
 
+    clear: function(e) {
+      if (this.isInput) this.$element.val(null);
+      else this.$element.find('input').val(null);
+      this.notifyChange();
+    },
+
     showMode: function(dir) {
       if (dir) {
         this.viewMode = Math.max(this.minViewMode, Math.min(
@@ -833,6 +840,7 @@
       // this handles time picker clicks
       this.widget.on('click', '[data-action]', $.proxy(this.doAction, this));
       this.widget.on('mousedown', $.proxy(this.stopEvent, this));
+      this.clearDate.on('click', $.proxy(this.clear, this));
       if (this.pickDate && this.pickTime) {
         this.widget.on('click.togglePicker', '.accordion-toggle', function(e) {
           e.stopPropagation();
@@ -847,7 +855,7 @@
             expanded.collapse('hide');
             closed.collapse('show')
             $this.find('i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
-            self.$element.find('.add-on i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
+            self.$element.find('.iconbtn i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
           }
         });
       }

app/helpers/orbit_form_helper.rb

@@ -6,6 +6,7 @@ module OrbitFormHelper
   def datetime_picker(object_name, method, options = {})
     options[:icon_time] ||= 'icons-clock'
     options[:icon_date] ||= 'icons-calendar'
+    options[:icon_clear] ||= 'icons-cross-3'
     options[:input_class] ||= 'input-large'
     options[:value] ||= options[:object][method] if options[:object] && options[:object][method]
     case options[:picker_type]
@@ -82,7 +83,10 @@ module OrbitFormHelper
     content_tag :div, :class => "#{options[:picker_class]} input-append" do
       concat label_tag options[:label] unless options[:no_label]
       concat text_field object_name, method, :placeholder => options[:placeholder], :class => options[:input_class], 'data-format' => options[:format], :value => options[:value]
-      concat (content_tag :span, :class => 'add-on' do
+      concat (content_tag :span, :class => 'add-on clearDate' do
+                content_tag :i, nil, :class => options[:icon_clear]
+              end)
+      concat (content_tag :span, :class => 'add-on iconbtn' do
                 content_tag :i, nil, 'data-time-icon' => options[:icon_time], 'data-date-icon' => options[:icon_date]
               end)
     end

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

@@ -15,8 +15,8 @@
               </div>
               <h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3>
               <div class="widget-content clear">
-                <%= f.datetime_picker :post_date, :picker_type => 'date', :label => t(:start_date) %>
+                <%= f.datetime_picker :post_date, :picker_type => 'date', :label => t(:start_date), :icon_date => "icons-cross-3 icon-spin" %>
-                <%= f.datetime_picker :unpost_date, :picker_type => 'date', :label => t(:end_date) %>
+                <%= f.datetime_picker :unpost_date, :picker_type => 'separated', :label => t(:end_date) %>
               </div>
           </div>