datepicker + timepicker + range + localication + Rails

README

app/assets/javascripts/admin klasöründe olması gereken js dosyaları:

# jquery-ui-i18n.min.js
# jquery-ui-sliderAccess.js (timepicker)
# jquery-ui-timepicker-addon.js (timepicker)
# jquery-ui-timepicker-tr.js (timepicker)

Timepicker: https://github.com/trentrichardson/jQuery-Timepicker-Addon

app/assets/images/admin/images klasöründe olması gereken resim dosyaları:

* animated-overlay.gif
* ui-bg_flat_0_aaaaaa_40x100.png
* ui-bg_flat_75_ffffff_40x100.png
* ui-bg_glass_55_fbf9ee_1x400.png
* ui-bg_glass_65_ffffff_1x400.png
* ui-bg_glass_75_dadada_1x400.png
* ui-bg_glass_75_e6e6e6_1x400.png
* ui-bg_glass_95_fef1ec_1x400.png
* ui-bg_highlight-soft_75_cccccc_1x100.png
* ui-icons_222222_256x240.png
* ui-icons_2e83ff_256x240.png
* ui-icons_454545_256x240.png
* ui-icons_888888_256x240.png
* ui-icons_cd0a0a_256x240.png

app/assets/stylesheets/admin klasöründe olması gereken css dosyaları:

* jquery-ui-timepicker-addon.css
* jquery-ui.min.css

Diğer dosyalar:

* app/assets/stylesheets/admin_main.css (içeriği aşağıda var)
* app/assets/javascripts/admin_main.js (içeriği aşağıda var)

admin_main.css

//= require_tree ./admin

admin_main.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree ./admin

view.html.erb

<%= stylesheet_link_tag    "admin_main", :media => "all" %>
<%= javascript_include_tag "admin_main" %>

<%= simple_form_for Search.new, url: { controller: "admin/search", action: :show }, remote: true, method: :get, html: { class: "ajax_form" } do |f| %>

  <%= f.input :start_date, label: t('report.start_date'), as: :string, input_html: { value: 1.day.ago.strftime("%d.%m.%Y %H:%I") }, readonly: true %>
  <%= f.input :end_date, label: t('report.end_date'), as: :string, input_html: { value: Time.now.strftime("%d.%m.%Y %H:%I") }, readonly: true %>

<% end %>

<script>
$(document).ready(function() {
  
  $.datepicker.setDefaults( $.datepicker.regional[ "" ] );

  $('#search_start_date').datetimepicker(
      $.extend({
        duration: '',
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd.mm.yy',
        maxDate: '<%= Time.now.strftime("%d.%m.%Y %H:%I") %>',
        onClose: function( selectedDate ) {
          $( "#search_end_date" ).datepicker( "option", "dateFormat", 'dd.mm.yy' );
          $( "#search_end_date" ).datepicker( "option", "minDate", selectedDate );
        },
        constrainInput: false },
        $.datepicker.regional['<%= I18n.locale.to_s %>']
    ));

  $('#search_end_date').datetimepicker(
      $.extend({
        duration: '',
        changeMonth: true,
        changeYear: true,
        minDate: '<%= 1.day.ago.strftime("%d.%m.%Y %H:%I") %>',
        dateFormat: 'dd.mm.yy',
        onClose: function( selectedDate ) {
          $( "#search_start_date" ).datepicker( "option", "dateFormat", 'dd.mm.yy' );
          $( "#search_start_date" ).datepicker( "option", "maxDate", selectedDate );
        },
        constrainInput: false },
        $.datepicker.regional['<%= I18n.locale.to_s %>']
    ));
  });
</script>