CODEWITHSUNDEEP
jquery-uiruby-on-rails-3.1
Kevin Thompson
Kevin Thompson

Reputation: 2506

Rails 3.1 JQuery Icons

I'm trying to attach a JQuery datepicker to a text field on a form, but I'm not sure how to use the icons that come with the JQuery download.

I have all of the stylesheets in my app/assets/stylesheets folder and there is a subfolder called images which I have also put in the stylesheets folder. I saw a different StackOverflow post saying that I shouldn't put those images into my app/assets/images folder.

Then in my .coffee file I have

$ -> $('.datepicker').datepicker({
    buttonImageOnly : true,
    buttonImage : "calendar.gif",
    showOn : "button"
    })

The problem is that I don't have a file called calendar.gif. I've seen a lot of examples for buttonImage and all of them reference files that I don't have. What I do have is several .png files that seem to have all of the icons for the theme in them. Is there something else that I am supposed to download or am I putting the big .png file in the wrong place?

I have tried so many different values for buttonImage that I wont bother to list them all. Here is a selection of stuff I've tried: ui-icon-calendar images/ui-icon-calculator.png images/.ui-icon-calculator.png images/ui-icon-calculator Any help is greatly appreciated.

Upvotes: 0

Views: 678

Answers (2)

Amree
Amree

Reputation: 2890

This is how I load my datepicker:

_form.html.haml

.row
  .span16
    = normal_div_if @purchase_order.errors[:date].empty? do
      = f.label :date, "Date, class: "compulsory"
      .input
        - if @purchase_order.new_record?
          = f.text_field :date, id: "datepicker", class: "small"
        - else
          = f.text_field :date, id: "datepicker", class: "small", value: l(@purchase_order.date)

global.js.coffee.erb (my custom javascript)

$ ->
  # Initiate date picker
  $("#datepicker").datepicker({dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true, showOn: "button", buttonImage: "<%= asset_path('calendar.png') %>", buttonImageOnly: true});

I put my calendar image is at assets/images/calendar.png

You can get the calendar image at http://www.famfamfam.com/lab/icons/silk/ for free.

Upvotes: 1

cwilkins
cwilkins

Reputation: 126

I think you're asking about using the datepicker field with the icon trigger. This variant is demonstrated on this page: http://jqueryui.com/demos/datepicker/#icon-trigger

If this is the case, it appears that the icon image is not an asset that is included with jQuery UI. You will need to create or find a calendar icon.

Upvotes: 0

Related Questions