source: admin-center/trunk/fuentes/admin-center.install/usr/share/admin-center/lib/bower_components/eonasdan-bootstrap-datetimepicker/docs/Extras.md @ 6782

Last change on this file since 6782 was 6782, checked in by kbut, 19 months ago

add moment and datetimepicker bootstrap plugin

File size: 3.8 KB
Line 
1# Extras
2
3Guides for making the picker work better with rails, IE, etc
4
5## Rails 3
6
7by [dhulihan](https://github.com/dhulihan)
8
9You can easily override the default rails form helpers (`date_select` and `datetime_select`) with bootstrap-datetimepicker for a much nicer experience.
10
11```rb
12# Add to config/initializers/form.rb or the end of app/helpers/application_helper.rb
13module ActionView
14  module Helpers
15    class FormBuilder
16      def date_select(method, options = {}, html_options = {})
17        existing_date = @object.send(method)
18        formatted_date = existing_date.to_date.strftime("%F") if existing_date.present?
19        @template.content_tag(:div, :class => "input-group") do   
20          text_field(method, :value => formatted_date, :class => "form-control datepicker", :"data-date-format" => "YYYY-MM-DD") +
21          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
22        end
23      end
24
25      def datetime_select(method, options = {}, html_options = {})
26        existing_time = @object.send(method)
27        formatted_time = existing_time.to_time.strftime("%F %I:%M %p") if existing_time.present?
28        @template.content_tag(:div, :class => "input-group") do   
29          text_field(method, :value => formatted_time, :class => "form-control datetimepicker", :"data-date-format" => "YYYY-MM-DD hh:mm A") +
30          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
31        end
32      end
33    end
34  end
35end
36```
37
38The time format used here is ActiveRecord-friendly, which means it will be parsed correctly when passed in through `params` to your record.
39
40That's all there is to it! Now all of your forms that use `datetime_select` or `date_select` will be automatically updated:
41
42```erb
43<% form_for @post do |f| %>
44        <div class="form-group">
45                <label>Published At</label>
46                <%= f.datetime_select :published_at %>
47        </div>
48<% end %>
49```
50
51## IE 7
52
53by [EquilibriumCST](https://github.com/EquilibriumCST)
54
55I succeed to run this widget under IE7.
56Here is what I did.
57
581. gliphicons are not working under IE7 so add [this css file](https://github.com/coliff/bootstrap-ie7). And this enables the icons.
59
602. Z-index problem with IE 7. I added position: relative and `z-index: 10` to the parent container. Otherwise popup is shown under the next elements.
61
623. JS events were not working well.
63
64If you open the datetimepicker widget and click on some button or date inside it, widget is automatically closed.
65So I added `debug: true` as an option when initializing the widget. Why I did this? I saw on line 1121 from bootsrap-datetimepicker.js the code `'blur': options.debug ? '' : hide`.
66And now widget window is not closed on every click inside it, but now you can't close it anyway :)
67And closing should be done manually. I've added this document click handler. If you click something outside the widget, now closing works.
68
69```
70$(document).click(function(e){
71                        var target = $(e.target);
72                        if(target.parents('.bootstrap-datetimepicker-widget').length < 1 && !target.hasClass('datetimepickerInput') && !target.hasClass('datepickerIcon') && !target.hasClass('clockpickerIcon')){
73                                if($('.bootstrap-datetimepicker-widget').length > 0){
74                                        $('#startDate').data('DateTimePicker').hide();
75                                        $('#startTime').data('DateTimePicker').hide();
76                                        $('.datetimepickerInput').blur();
77                                }
78                        }
79                });
80```
81
82
83But if you have more than one widget on the page like I did, clicking on one widget does'n close the other. Added below lines and now all works fine.
84
85```
86$('#widget1').on("dp.show",function (e) {
87        $('#widget2).data('DateTimePicker').hide();
88});
89
90$('#widget2').on("dp.show",function (e) {
91        $('#widget1).data('DateTimePicker').hide();
92});
93```
94
95I hope this will help to the others who are fighting with the old IE versions :)
Note: See TracBrowser for help on using the repository browser.