Change date picker

app/assets/javascripts/datetimepicker.js

@@ -0,0 +1,17 @@
+$(document).ready(function(){
+
+  $('.date_picker').datetimepicker({
+      pickTime: false
+  });
+
+  $('.default_picker').datetimepicker();
+
+  $('.time_picker').datetimepicker({
+      pickDate: false
+  });
+
+  $('.separated_picker div').on("changeDate",function(){
+    $(this).siblings('input').val($(this).find('input').val() + ' ' + $(this).siblings('div').find('input').val());
+  });
+
+});

app/assets/javascripts/new_admin.js

@@ -19,4 +19,6 @@
 //= require side_bar_history
 //= require rss
 //= require ajax_form
-//= require inc/ajax_setting
+//= require inc/ajax_setting
+//= require lib/bootstrap-datetimepicker
+//= require datetimepicker

app/assets/stylesheets/lib/bootstrap-datetimepicker.css

@@ -0,0 +1,221 @@
+/*!
+* Datepicker for Bootstrap
+*
+* Copyright 2012 Stefan Petre
+* Licensed under the Apache License v2.0
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+*/
+.clearfix {
+	*zoom:1;
+}
+.clearfix:before,
+.clearfix:after {
+	display:table;
+	content:"";
+	line-height:0;
+}
+.clearfix:after {
+	clear:both;
+}
+.hide-text {
+	font:0/0 a;
+	color:transparent;
+	text-shadow:none;
+	background-color:transparent;
+	border:0;
+}
+.input-block-level {
+	display:block;
+	width:100%;
+	min-height:30px;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+}
+.bootstrap-datetimepicker-widget {
+	top:0;
+	left:0;
+	min-width: 113px;
+	padding:4px;
+	margin-top:1px;
+	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	border-radius:4px;
+}
+.bootstrap-datetimepicker-widget:before {
+	content:'';
+	display:inline-block;
+	border-left:7px solid transparent;
+	border-right:7px solid transparent;
+	border-bottom:7px solid #ccc;
+	border-bottom-color:rgba(0,0,0,0.2);
+	position:absolute;
+	top:-7px;
+	left:6px;
+}
+.bootstrap-datetimepicker-widget:after {
+	content:'';
+	display:inline-block;
+	border-left:6px solid transparent;
+	border-right:6px solid transparent;
+	border-bottom:6px solid #fff;
+	position:absolute;
+	top:-6px;
+	left:7px;
+}
+.bootstrap-datetimepicker-widget .timepicker {
+	min-width: 110px;
+}
+.bootstrap-datetimepicker-widget>ul {
+	list-style-type:none;
+	margin:0;
+}
+.bootstrap-datetimepicker-widget .timepicker-hour,
+.bootstrap-datetimepicker-widget .timepicker-minute,
+.bootstrap-datetimepicker-widget .timepicker-second {
+	font-weight:bold;
+	font-size:1.2em;
+}
+.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator {
+	width:4px;
+	padding:0;
+	margin:0;
+}
+.bootstrap-datetimepicker-widget .datepicker>div {
+	display:none;
+}
+.bootstrap-datetimepicker-widget .picker-switch {
+	text-align:center;
+}
+.bootstrap-datetimepicker-widget table {
+	width:100%;
+	margin:0;
+}
+.bootstrap-datetimepicker-widget td,
+.bootstrap-datetimepicker-widget th {
+	text-align:center;
+	width:20px;
+	height:20px;
+	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	border-radius:4px;
+	vertical-align: middle;
+}
+.bootstrap-datetimepicker-widget td.day:hover,
+.bootstrap-datetimepicker-widget td.hour:hover,
+.bootstrap-datetimepicker-widget td.minute:hover,
+.bootstrap-datetimepicker-widget td.second:hover {
+	background:#eee;
+	cursor:pointer;
+}
+.bootstrap-datetimepicker-widget td.old,
+.bootstrap-datetimepicker-widget td.new {
+	color:#999;
+}
+.bootstrap-datetimepicker-widget td.active,
+.bootstrap-datetimepicker-widget td.active:hover {
+	color:#fff;
+	background-color:#006dcc;
+	background-image:-moz-linear-gradient(top,#08c,#04c);
+	background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
+	background-image:-webkit-linear-gradient(top,#08c,#04c);
+	background-image:-o-linear-gradient(top,#08c,#04c);
+	background-image:linear-gradient(to bottom,#08c,#04c);
+	background-repeat:repeat-x;
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
+	border-color:#04c #04c #002a80;
+	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+	*background-color:#04c;
+	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
+	color:#fff;
+	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
+}
+.bootstrap-datetimepicker-widget td.active:hover,
+.bootstrap-datetimepicker-widget td.active:hover:hover,
+.bootstrap-datetimepicker-widget td.active:active,
+.bootstrap-datetimepicker-widget td.active:hover:active,
+.bootstrap-datetimepicker-widget td.active.active,
+.bootstrap-datetimepicker-widget td.active:hover.active,
+.bootstrap-datetimepicker-widget td.active.disabled,
+.bootstrap-datetimepicker-widget td.active:hover.disabled,
+.bootstrap-datetimepicker-widget td.active[disabled],
+.bootstrap-datetimepicker-widget td.active:hover[disabled] {
+	color:#fff;
+	background-color:#04c;
+	*background-color:#003bb3;
+}
+.bootstrap-datetimepicker-widget td.active:active,
+.bootstrap-datetimepicker-widget td.active:hover:active,
+.bootstrap-datetimepicker-widget td.active.active,
+.bootstrap-datetimepicker-widget td.active:hover.active {
+	background-color:#039 \9;
+}
+.bootstrap-datetimepicker-widget td span {
+	display:block;
+	width:100%;
+	height:54px;
+	line-height:54px;
+	float:left;
+	cursor:pointer;
+	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	border-radius:4px;
+}
+.bootstrap-datetimepicker-widget .datepicker-months td span,
+.bootstrap-datetimepicker-widget .datepicker-years td span {
+	width: 50px;
+}
+.bootstrap-datetimepicker-widget td span:hover {
+	background:#eee;
+}
+.bootstrap-datetimepicker-widget td span.active {
+	color:#fff;
+	background-color:#006dcc;
+	background-image:-moz-linear-gradient(top,#08c,#04c);
+	background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
+	background-image:-webkit-linear-gradient(top,#08c,#04c);
+	background-image:-o-linear-gradient(top,#08c,#04c);
+	background-image:linear-gradient(to bottom,#08c,#04c);
+	background-repeat:repeat-x;
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
+	border-color:#04c #04c #002a80;
+	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+	*background-color:#04c;
+	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
+	color:#fff;
+	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
+}
+.bootstrap-datetimepicker-widget td span.active:hover,
+.bootstrap-datetimepicker-widget td span.active:active,
+.bootstrap-datetimepicker-widget td span.active.active,
+.bootstrap-datetimepicker-widget td span.active.disabled,
+.bootstrap-datetimepicker-widget td span.active[disabled] {
+	color:#fff;
+	background-color:#04c;
+	*background-color:#003bb3;
+}
+.bootstrap-datetimepicker-widget td span.active:active,
+.bootstrap-datetimepicker-widget td span.active.active {
+	background-color:#039 \9;
+}
+.bootstrap-datetimepicker-widget td span.old {
+	color:#999;
+}
+.bootstrap-datetimepicker-widget th.switch {
+	width:145px;
+}
+.bootstrap-datetimepicker-widget th.next,
+.bootstrap-datetimepicker-widget th.prev {
+	font-size:21px;
+}
+.bootstrap-datetimepicker-widget thead tr:first-child th {
+	cursor:pointer;
+}
+.bootstrap-datetimepicker-widget thead tr:first-child th:hover {
+	background:#eee;
+}
+.input-append.date .add-on i,
+.input-prepend.date .add-on i {
+	cursor:pointer;
+}

app/assets/stylesheets/new_admin.css.erb

@@ -16,4 +16,5 @@
  *= require isotope
  *= require icons
  *= require site-map
+ *= require lib/bootstrap-datetimepicker
 */ 

app/controllers/application_controller.rb

@@ -12,7 +12,7 @@ class ApplicationController < ActionController::Base
 
   layout :layout_by_resource
   
-  helper :admin
+  helper :admin, :orbit_form
   before_filter :set_locale, :set_site, :prepare_for_mobile
 
   helper_attr :site_valid_locales

app/helpers/application_helper.rb

@@ -254,6 +254,10 @@ module ApplicationHelper
     object.strftime("%Y-%m-%d")
   end
 
+  def display_time(object)
+    object.strftime("%H:%M")
+  end
+
   def share_links(object, key)
     content_tag :div, :class => 'fb' do
       concat social_share_button_tag(object.title, :fb_url => generate_fb_url(object,key), :image => "http://#{request.env['HTTP_HOST']}#{object.image_url}")

app/helpers/orbit_form_helper.rb

@@ -0,0 +1,99 @@
+module OrbitFormHelper
+  def self.included(base)
+    ActionView::Helpers::FormBuilder.send(:include, Orbit::FormBuilder)
+  end
+
+  def datetime_picker(object_name, method, options = {})
+    options[:icon_time] ||= 'icons-clock'
+    options[:icon_date] ||= 'icons-calendar'
+    options[:input_class] ||= 'input-large'
+    options[:value] ||= options[:object][method] if options[:object] && options[:object][method]
+    case options[:picker_type]
+    when 'date'
+      content_tag :div, :id => options[:id], :class => options[:class] do
+        date_picker(object_name, method, options)
+      end
+    when 'time'
+      content_tag :div, :id => options[:id], :class => options[:class] do
+        time_picker(object_name, method, options)
+      end
+    when 'separated'
+      options[:label] ||= I18n.t('datetime_picker.separated.label')
+      content_tag :div, :id => options[:id], :class => "separated_picker #{options[:class]}" do
+        concat label_tag options[:label] unless options[:no_label]
+        concat hidden_field(object_name, method)
+        concat separated_picker(object_name, method, options)
+      end
+    else
+      content_tag :div, :id => options[:id], :class => options[:class] do
+        default_picker(object_name, method, options)
+      end
+    end
+  end
+
+  def date_picker(object_name, method, options)
+    custom = {}
+    custom[:format] = 'yyyy-MM-dd'
+    custom[:value] = display_date(options[:value]) if options[:value]
+    custom[:picker_class] = 'date_picker'
+    custom[:label] = options[:label] || I18n.t('datetime_picker.date.label')
+    custom[:placeholder] = options[:placeholder] || I18n.t('datetime_picker.date.placeholder')
+    picker(object_name, method, options.merge(custom))
+  end
+
+  def default_picker(object_name, method, options)
+    custom = {}
+    custom[:format] = 'yyyy-MM-dd hh:mm'
+    custom[:value] = display_date_time(options[:value]) if options[:value]
+    custom[:picker_class] = 'default_picker'
+    custom[:label] = options[:label] || I18n.t('datetime_picker.default.label')
+    custom[:placeholder] = options[:placeholder] || I18n.t('datetime_picker.default.placeholder')
+    picker(object_name, method, options.merge(custom))
+  end
+
+  def time_picker(object_name, method, options)
+    custom = {}
+    custom[:format] = 'hh:mm'
+    custom[:value] = display_time(options[:value]) if options[:value]
+    custom[:picker_class] = 'time_picker'
+    custom[:label] = options[:label] || I18n.t('datetime_picker.time.label')
+    custom[:placeholder] = options[:placeholder] || I18n.t('datetime_picker.time.placeholder')
+    picker(object_name, method, options.merge(custom))
+  end
+
+  def separated_picker(object_name, method, options)
+    custom = {}
+    custom[:no_label] = true
+    date_picker(nil, nil, options.merge(custom)) + time_picker(nil, nil, options.merge(custom))
+  end
+
+
+  def single_picker(object_name, method, options)
+    content_tag :div, :id => options[:id], :class => options[:class] do
+      picker(object_name, method, options)
+    end
+  end
+
+  def double_picker(object_name, method, options)
+    
+  end
+
+  def picker(object_name, method, options)
+    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
+                content_tag :i, nil, 'data-time-icon' => options[:icon_time], 'data-date-icon' => options[:icon_date]
+              end)
+    end
+  end
+
+end
+
+module Orbit::FormBuilder
+  # ActionPack's metaprogramming would have done this for us, if FormHelper#labeled_input 
+  # had been defined  at load.   Instead we define it ourselves here.
+  def datetime_picker(method, options = {})
+    @template.datetime_picker(@object_name, method, objectify_options(options))
+  end
+end

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

@@ -1,13 +1,7 @@
-<% content_for :page_specific_css do %>
-	<%= stylesheet_link_tag "lib/datepicker"  %>
-<% end %>
 <% content_for :page_specific_javascript do %>
-	<%= javascript_include_tag "lib/datepicker"  %>
-	<%= javascript_include_tag "lib/date.format.js"  %>
 	<%= javascript_include_tag "inc/modal-preview" %>
 	<%= javascript_include_tag "/static/jquery.cycle.all.latest.js" %>
 	<%= javascript_include_tag "inc/jquery.imagesloaded.js" %>
-	
 <% end %>
 
 
@@ -21,51 +15,8 @@
               </div>
               <h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3>
               <div class="widget-content clear">
-                  <div id="calendarRange">
+                <%= f.datetime_picker :post_date, :picker_type => 'date', :label => t(:start_date) %>
-                      <div class="input-append">
+                <%= f.datetime_picker :unpost_date, :picker_type => 'date', :label => t(:end_date) %>
-                          <span class="showDate"></span><span class="add-on btn">▼</span>
-													<%= f.hidden_field :parse_post_date,:value => @ad_image.post_date.strftime('%Y / %m / %d') %>
-													<%= f.hidden_field :parse_unpost_date,:value => @ad_image.unpost_date.strftime('%Y / %m / %d')%>
-
-                      </div>
-                      <div id="widgetCalendar">
-                      </div>
-                  </div>
-                  <script type="text/javascript">
-                      var today = new Date();
-                      today = today.format('isoDate');
-                      var state = false;
-                      var arr = state ? "▼" : "▲"
-											var start_date = <%= (@ad_image.post_date.nil?? 'today' : "'#{@ad_image.post_date.strftime('%Y / %m / %d')}'").html_safe %>;
-											var end_date = <%= (@ad_image.unpost_date.nil?? 'today' : "'#{@ad_image.unpost_date.strftime('%Y / %m / %d')}'").html_safe %>;
-                      //calendarRange
-                      $('#calendarRange .showDate').html(start_date+" - "+end_date);
-                      $('#calendarRange .calendarInput').val(start_date+" - "+end_date);
-                      $('#calendarRange #widgetCalendar').DatePicker({
-                          flat: true,
-                          format: 'Y / m / d',
-													date: [start_date,end_date],
-                          calendars: 1,
-                          mode: 'range',
-                          starts: 1,
-                          onChange: function(formated) {
-                              $('#calendarRange .showDate').get(0).innerHTML = formated.join(' - ');
-                              $('#calendarRange .calendarInput').val(formated.join(' - '));
-															start_date = formated[0].replace(/\s/g, "");
-															end_date = formated[1].replace(/\s/g, "");
-															$('#ad_image_parse_post_date').val(start_date);
-															$('#ad_image_parse_unpost_date').val(end_date);
-                          }
-                      });
-                      $('#calendarRange .input-append').bind('click', function(){
-                          var arr = state ? "▼" : "▲"
-                          $('#calendarRange .add-on').html(arr);
-                          $('#calendarRange #widgetCalendar').stop().animate({height: state ? 0 : $('#calendarRange #widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
-                          state = !state;
-                          return false;
-                      });
-                      $('#calendarRange #widgetCalendar div.datepicker').css('position', 'absolute');
-                  </script>  
               </div>
           </div>
 		

config/locales/picker.en.yml

@@ -0,0 +1,14 @@
+en:
+
+  datetime_picker:
+    date:
+      label: Date
+      placeholder: "YYYY-MM-DD"
+    default:
+      label: Date and time
+      placeholder: "YYYY-MM-DD HH:MM"
+    separated:
+      label: Date and time
+    time:
+      label: Time
+      placeholder: "HH:MM"

config/locales/picker.zh_tw.yml

@@ -0,0 +1,14 @@
+en:
+
+  datetime_picker:
+    date:
+      label: 日期
+      placeholder: "YYYY-MM-DD"
+    default:
+      label: 日期和時間
+      placeholder: "YYYY-MM-DD HH:MM"
+    separated:
+      label: 日期和時間
+    time:
+      label: 時間
+      placeholder: "HH:MM"

vendor/built_in_modules/announcement/app/views/panel/announcement/back_end/bulletins/_form.html.erb

@@ -46,16 +46,10 @@
 			<h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3>
 				<div class="widget-content clear">
 				<div class="control-group">
-					<label class="control-label"><%= t(:start) %></label>
+					<%= f.datetime_picker :postdate, :picker_type => 'separated', :label => t(:start) %>
-					<div class="controls">
-						<%= f.datetime_select :postdate, {:use_month_numbers => true, :order => [:day, :month, :year] }, {:class => 'span1'} %>
-					</div>
 				</div>
 				<div class="control-group">
-					<label class="control-label"><%= t(:end) %></label>
+					<%= f.datetime_picker :deadline, :picker_type => 'separated', :label => t(:end) %>
-					<div class="controls">
-						<%= f.datetime_select :deadline, {:use_month_numbers => true, :prompt => { :month => 'Month', :day => 'Day', :year => 'Year'}, :order => [:day, :month, :year] }, {:class => 'span1'} %>
-					</div>
 				</div>
 			</div>
 		</div>