Change date picker

This commit is contained in:
chris 2013-01-09 05:18:16 +08:00
parent 5b13c53ed9
commit fac4faad6c
12 changed files with 1534 additions and 61 deletions

View File

@ -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());
});
});

File diff suppressed because it is too large Load Diff

View File

@ -20,3 +20,5 @@
//= require rss //= require rss
//= require ajax_form //= require ajax_form
//= require inc/ajax_setting //= require inc/ajax_setting
//= require lib/bootstrap-datetimepicker
//= require datetimepicker

View File

@ -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;
}

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -1,13 +1,7 @@
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/datepicker" %>
<% end %>
<% content_for :page_specific_javascript do %> <% 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 "inc/modal-preview" %>
<%= javascript_include_tag "/static/jquery.cycle.all.latest.js" %> <%= javascript_include_tag "/static/jquery.cycle.all.latest.js" %>
<%= javascript_include_tag "inc/jquery.imagesloaded.js" %> <%= javascript_include_tag "inc/jquery.imagesloaded.js" %>
<% end %> <% end %>
@ -21,51 +15,8 @@
</div> </div>
<h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3> <h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3>
<div class="widget-content clear"> <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>
</div> </div>

View File

@ -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"

View File

@ -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"

View File

@ -46,16 +46,10 @@
<h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3> <h3 class="widget-title"><i class="icons-calendar"></i><%= t(:date_) %></h3>
<div class="widget-content clear"> <div class="widget-content clear">
<div class="control-group"> <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>
<div class="control-group"> <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> </div>
</div> </div>