Semantic DateTime Tags

Set of Rails helpers that mark up Date, DateTime instances and their ranges with sensible combination of (html5) tags, data attributes and CSS classes so that their display can be easily controlled via CSS.

The generated markup takes into account Date/Time formats as specified in the I18n localizations.

This allows, for example, highlighting today's dates:

time.date.semantic.current_date {
  background-color: yellow;
}

Hiding current year via CSS:

time.date.semantic.current_year {
  span.year {
    display: none;
  }
}

Or, in the case of date ranges, avoiding repetition of year in both dates:

span.date_range.semantic.same_year {
  time.date.semantic.from {
    span.year {
      display: none;
    }
  }
}

See the included SCSS example for more.

Installation

Add this line to your application's Gemfile:

gem 'semantic_date_time_tags'

And then execute:

$ bundle

Or install it yourself as:

$ gem install semantic_date_time_tags

If you want to use the default css you can include it like this:

/*
 *= require 'semantic_date_time_tags/default'
 */

Or if you like to use some of the mixins, import them like this:

@import "semantic_date_time_tags/partials/mixins";

Usage

In your views:

Date

<%= semantic_date_tag(Date.today) %>

Will result in the following markup:

<time class="date semantic current_date current_year" datetime="2014-09-26">
  <span class="day d">26</span><span class="sep">.</span><span class="month m">9</span><span class="sep">.</span><span class="year Y">2014</span>
</time>

DateTime

<%= semantic_date_time_tag(DateTime.now) %>

Will result in the following markup:

<time class="date_time semantic current_date current_year" datetime="2014-09-26T15:35:56+02:00">
  <span class="day d">26</span><span class="sep">.</span><span class="month m">9</span><span class="sep">.</span><span class="year Y">2014</span> <span class="hours H">15</span><span class="sep">:</span><span class="minutes M">35</span>
</time>

Date Range

<%= semantic_date_range_tag(Date.today, Date.tomorrow) %>

Will result in the following markup:

<span class="date_range semantic same_year same_month">
  <time class="date semantic current_date current_year from">
    <span class="day d">26</span><span class="sep">.</span><span class="month m">9</span><span class="sep">.</span><span class="year Y">2014</span>
  </time>
  <span class="date_range_separator"> – </span>
  <time class="date semantic current_year to">
    <span class="day d">27</span><span class="sep">.</span><span class="month m">9</span><span class="sep">.</span><span class="year Y">2014</span>
  </time>
</span>

Contributing

Fork it ( https://github.com/tomasc/semantic_date_time_tags/fork )
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

tomasc / semantic_date_time_tags Goto Github PK