Giter Club home page Giter Club logo

jquery_datepicker's Introduction

<img src=“https://travis-ci.org/albertopq/jquery_datepicker.png” />

jQuery Datepicker Rails plugin

This simple gem allows you to add a date picker field into your views.

Getting Started

Pre Rails 3.1:

  1. Add into your Gemfile:

    gem 'jquery-rails'
    
  2. Execute this command to install the needed js files:

    rails generate jquery:install --ui
  3. Insert into your Gemfile:

    gem 'jquery_datepicker'
    

Don’t forget to install the CSS!

Rails 3.1:

  1. Insert into your Gemfile:

    gem 'jquery_datepicker'
    
  2. If you are using Rails 3.1 with the asset pipeline enabled (default), the necessary files are already in your asset pipeline. Just add (if they are not already there) to your app/assets/javascripts/application.js:

    //= require jquery
    //= require jquery-ujs
    //= require jquery-ui

(if you are using datetime picker, add also)

//= require jquery-ui-timepicker-addon.js

You can find it here:

github.com/trentrichardson/jQuery-Timepicker-Addon

Usage

Add this to your view.

<%= datepicker_input "user","birthday" %>

Where “user” is your model name and “birthday” the name of the datefield.

You can also use it with the form helper like:

<% form_for(@user) do |f| %>
  <%= f.datepicker 'birthday' %>
  <%= f.submit 'Create' %>
<% end %>

Nested attributes are permitted as well:

<% form_for(@user) do |f| %>
  <% f.fields_for(@nested) do |f2| %>
    <%= f2.datepicker 'birthday' %>
  <% end %>
  <%= f.submit 'Create' %>
<% end %>

You can pass options as it would be a normal text_field, plus all the datepicker options available (jqueryui.com/demos/datepicker/#options)

<%= datepicker_input(:foo, :att1, :minDate => -20, :maxDate => "+1M +10D", :tabindex => 70) %>

Use DateTime picker

If you want to use a datetime picker, download this plugin

github.com/trentrichardson/jQuery-Timepicker-Addon

and add it to your project (in the assets pipeline if you are using Rails 3.1 or manually otherwise). Don’t forget the CSS! This plugin assume you have installed a jquery-ui theme.

Then you can use in your views:

<%= datetime_picker_input "user","loged_in", :dateFormat => "yy-mm-dd" %>

or

<% form_for(@user) do |f| %>
  <%= f.datetime_picker 'loged_in', :dateFormat => "yy-mm-dd" %>
  <%= f.submit 'Create' %>
<% end %>

Important! Be aware the way Rails stores the datetime fields cause you’ll need to specify the dateFormat to “yy-mm-dd” or pre-process your field value on the controller. The default format won’t work.

Support

Open an issue in github.com/albertopq/jquery_datepicker if you need further support or want to report a bug

jquery_datepicker's People

Contributors

albertopq avatar anowell avatar hale avatar seanabrahams avatar kb1ibt avatar mcary avatar osuka avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.