Git Product home page Git Product logo

xdan-datetimepicker-rails's Introduction

Xdan Datetimepicker Rails

This gem adds @xdan's datetimepicker to the Rails asset pipeline.

Installation

Add this line to your application's Gemfile:

gem 'xdan-datetimepicker-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install xdan-datetimepicker-rails

Usage

Require the jquery file into your application.js.coffee file:

#= require jquery.xdan.datetimepicker

Import the stylesheet in your application.css.scss file:

@import "jquery.xdan.datetimepicker";

Start using it!

# /app/assets/javascripts/datetimepicker.js.coffee

#= require jquery.xdan.datetimepicker

@setupDateTimePicker = (container) ->
  defaults = {
    formatDate: 'y-m-d',
    format: 'Y-m-d H:i',
    allowBlank: true,
    defaultSelect: false,
    validateOnBlur: false
  }

  entries = $(container).find('input.datetimepicker')
  entries.each (index, entry) ->
    options = $(entry).data 'datepicker-options'
    $(entry).datetimepicker $.extend(defaults, options)

$ ->
  setupDateTimePicker $('body')

See the detailed documentation for more options. When the site is back up I'll try to port some of them into this README or move them to the official repo of datetimepicker.

SimpleForm Integration

# /app/inputs/datetimepicker_input.rb

class DatetimepickerInput < SimpleForm::Inputs::StringInput
  def input_html_classes
    super.push("datetimepicker")
  end

  def input_type
    :string
  end

  def input_html_options
    super.tap do |opts|
      opts[:data] ||= {}
      opts[:data].merge! datepicker_options
      opts[:value] ||= value
    end
  end

  def value
    val = object.send(attribute_name)
    return DateTime.new(val.year, val.month, val.day, val.hour, val.min).strftime("%Y-%m-%d %H:%M") if val.is_a?(Time)
    return val if val.nil?
    val.to_s
  end

  private
    def datepicker_options
      options = self.options.fetch(:datepicker_options, {})
      options = Hash[options.map{ |k, v| [k.to_s.camelcase(:lower), v] }]
      { datepicker_options: options }
    end
end

Formtastic Integration

# /app/inputs/datetimepicker_input.rb

class DatetimepickerInput < ::Formtastic::Inputs::StringInput
  def input_html_options
    super.tap do |options|
      options[:class] = [options[:class], "datetimepicker"].compact.join(' ')
      options[:data] ||= {}
      options[:data].merge! datepicker_options
      options[:value] ||= value
    end
  end

  def value
    val = object.send(method)
    return DateTime.new(val.year, val.month, val.day, val.hour, val.min).strftime("%Y-%m-%d %H:%M") if val.is_a?(Time)
    return val if val.nil?
    val.to_s
  end

  private
    def datepicker_options
      options = self.options.fetch(:datepicker_options, {})
      options = Hash[options.map{ |k, v| [k.to_s.camelcase(:lower), v] }]
      { datepicker_options: options }
    end
end

Versioning

This gem will attempt to maintain the same version as the datetimepicker library.

Contributing

  1. Fork it ( http://github.com//xdan-datetimepicker-rails/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

xdan-datetimepicker-rails's People

Contributors

shekibobo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

xdan-datetimepicker-rails's Issues

Wrong day of the week

This really is a fantastic gem, but something strange is happening. We have a datetime range picker in our app, and for almost everyone, it's being generated properly. However, we have just had one user in Australia report that the days of the week are off by 1 day. It's not a leap year problem, February the 29th is being generated in the calendar. It's just on a Tuesday instead of a Monday.

What might be causing the difference for that user? Are there local browser or computer settings which would interfere with the DataTime calculation? Where does the datetimepicker get its date information from for each user? Is there anything we can do to make sure that the calendar is generated properly for everyone?

Thanks.

Some questions about rails configuration

There are no application.js.coffee or application.css.scss files in my application, but only an app/assets/javascripts/application.js and an app/assets/stylesheets/application.css files.
How am I expected to configure these files? Or perhaps should I create the application.js.coffee and application.css.scss files?

Also, my main concern is this: would the gem automatically produce a DateTime format understandable by Rails, like "yyyy-mm-dd hh:mm:ss" (for instance "2017-07-28 10:56:43")?

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.