Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marcoroth/local-time

Modern fork of Basecamp's `local-time`
https://github.com/marcoroth/local-time

date datetime hacktoberfest javascript local-time rails ruby time time-elements

Last synced: 20 days ago
JSON representation

Modern fork of Basecamp's `local-time`

Host: GitHub
URL: https://github.com/marcoroth/local-time
Owner: marcoroth
License: other
Created: 2022-09-30T03:36:47.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-11-29T21:48:55.000Z (almost 2 years ago)
Last Synced: 2024-10-04T16:33:46.476Z (about 1 month ago)
Topics: date, datetime, hacktoberfest, javascript, local-time, rails, ruby, time, time-elements
Language: TypeScript
Homepage:
Size: 280 KB
Stars: 12
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: MIT-LICENSE

Awesome Lists containing this project

README

# Modern Local Time

> This is a modern fork of Basecamp's `local-time` npm package and gem. The original repo can be found here: https://github.com/basecamp/local_time

Local Time makes it easy to display times and dates to users in their local time. Its Rails helpers render `` elements in UTC (making them cache friendly), and its JavaScript component immediately converts those elements from UTC to the browser's local time.

## Installation

1. Add `gem 'local_time', github: 'marcoroth/local-time'` to your Gemfile.
2. If you are using Webpack(er) / esbuild / Vite: Run `yarn add @marcoroth/local-time` to add the npm package to your `package.json`
2. If you are using Import Maps run `bin/importmap pin @marcoroth/local-time`
3. Import `LocalTime` from [`@marcoroth/local-time`](https://www.npmjs.com/package/@marcoroth/local-time) in your application's JavaScript bundle.

```js
import LocalTime from "@marcoroth/local-time"

LocalTime.start()
```

## Example

```ruby
> comment.created_at
"Wed, 27 Nov 2013 18:43:22 EST -0500"
```

```erb
<%= local_time(comment.created_at) %>
```

Renders:

```html
November 27, 2013 11:43pm
```

And is converted client-side to:

```html
November 27, 2013 6:43pm
```

*(Line breaks added for readability)*

## Time and date helpers

```erb
<%= local_time(time) %>
```

Format with a strftime string (default format shown here)

```erb
<%= local_time(time, '%B %e, %Y %l:%M%P') %>
```

Alias for `local_time` with a month-formatted default

```erb
<%= local_date(time, '%B %e, %Y') %>
```

To set attributes on the time tag, pass a hash as the second argument with a `:format` key and your attributes.

```erb
<%= local_time(time, format: '%B %e, %Y %l:%M%P', class: 'my-time') %>
```

To use a strftime format already defined in your app, pass a symbol as the format.

```erb
<%= local_time(date, :long) %>
```

`I18n.t("time.formats.#{format}")`, `I18n.t("date.formats.#{format}")`, `Time::DATE_FORMATS[format]`, and `Date::DATE_FORMATS[format]` will be scanned (in that order) for your format.

Note: The included strftime JavaScript implementation is not 100% complete. It supports the following directives: `%a %A %b %B %c %d %e %H %I %l %m %M %p %P %S %w %y %Y %Z`

## Time ago helpers

```erb
<%= local_time_ago(time) %>
```

Displays the relative amount of time passed. With age, the descriptions transition from {quantity of seconds, minutes, or hours} to {date + time} to {date}. The `` elements are updated every 60 seconds.

Examples (in quotes):

* Recent: "a second ago", "32 seconds ago", "an hour ago", "14 hours ago"
* Yesterday: "yesterday at 5:22pm"
* This week: "Tuesday at 12:48am"
* This year: "on Nov 17"
* Last year: "on Jan 31, 2012"

## Relative time helpers

Preset time and date formats that vary with age. The available types are `date`, `time-ago`, `time-or-date`, and `weekday`. Like the `local_time` helper, `:type` can be passed a string or in an options hash.

```erb
<%= local_relative_time(time, 'weekday') %>
<%= local_relative_time(time, type: 'time-or-date') %>
```

**Available `:type` options**

* `date` Includes the year unless it's current. "Apr 11" or "Apr 11, 2013"
* `time-ago` See above. `local_time_ago` calls `local_relative_time` with this `:type` option.
* `time-or-date` Displays the time if it occurs today or the date if not. "3:26pm" or "Apr 11"
* `weekday` Displays "Today", "Yesterday", or the weekday (e.g. Wednesday) if the time is within a week of today.
* `weekday-or-date` Displays the weekday if it occurs within a week or the date if not. "Yesterday" or "Apr 11"

## Configuration

**Internationalization (I18n)**

Local Time includes a [set of default `en` translations](lib/assets/javascripts/src/local-time/config/i18n.coffee) which can be updated directly. Or, you can provide an entirely new set in a different locale:

```js
LocalTime.config.i18n["es"] = {
date: {
dayNames: [ … ],
monthNames: [ … ],
…
},
time: {
…
},
datetime: {
…
}
}

LocalTime.config.locale = "es"
```

## License