{"id":13393175,"url":"https://github.com/basecamp/local_time","last_synced_at":"2025-05-12T13:15:15.993Z","repository":{"id":11910554,"uuid":"14475276","full_name":"basecamp/local_time","owner":"basecamp","description":"Rails engine for cache-friendly, client-side local time","archived":false,"fork":false,"pushed_at":"2025-03-12T09:07:39.000Z","size":1844,"stargazers_count":1963,"open_issues_count":2,"forks_count":124,"subscribers_count":45,"default_branch":"main","last_synced_at":"2025-05-12T13:14:58.070Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basecamp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-11-17T21:24:07.000Z","updated_at":"2025-05-02T12:10:29.000Z","dependencies_parsed_at":"2024-01-08T17:13:12.202Z","dependency_job_id":"7cb342ea-15f5-4b3e-80a8-25130be9e0cc","html_url":"https://github.com/basecamp/local_time","commit_stats":{"total_commits":162,"total_committers":16,"mean_commits":10.125,"dds":0.2901234567901234,"last_synced_commit":"1b5579f0c8b906e8a48146132dc681a6823da68a"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basecamp%2Flocal_time","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basecamp%2Flocal_time/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basecamp%2Flocal_time/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basecamp%2Flocal_time/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basecamp","download_url":"https://codeload.github.com/basecamp/local_time/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745196,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:00:44.656Z","updated_at":"2025-05-12T13:15:15.955Z","avatar_url":"https://github.com/basecamp.png","language":"JavaScript","readme":"# Local Time\n\nLocal Time makes it easy to display times and dates to users in their local time. Its Rails helpers render `\u003ctime\u003e` elements in UTC (making them cache friendly), and its JavaScript component immediately converts those elements from UTC to the browser's local time.\n\n## Installation\n\n### Importmaps\n1. Add `gem \"local_time\"` to your Gemfile.\n2. Run `bundle install`\n3. Run `bin/importmap pin local-time` to add the [local-time npm package](https://www.npmjs.com/package/local-time)\n4. Add this to `app/javascript/application.js`\n\n    ```js\n    import LocalTime from \"local-time\"\n    LocalTime.start()\n    document.addEventListener(\"turbo:morph\", () =\u003e {\n      LocalTime.run()\n    })\n    ```\n\n### Webpacker\n1. Add `gem \"local_time\"` to your Gemfile.\n2. Run `bundle install`\n3. Run `yarn add local-time`\n4. Add this to `app/javascript/packs/application.js`\n\n    ```js\n    import LocalTime from \"local-time\"\n    LocalTime.start()\n    ```\n\n## Example\n\n```ruby\n\u003e comment.created_at\n\"Wed, 27 Nov 2013 18:43:22 EST -0500\"\n```\n\n```erb\n\u003c%= local_time(comment.created_at) %\u003e\n```\n\nRenders:\n\n```html\n\u003ctime data-format=\"%B %e, %Y %l:%M%P\"\n      data-local=\"time\"\n      datetime=\"2013-11-27T23:43:22Z\"\u003eNovember 27, 2013 11:43pm\u003c/time\u003e\n```\n\nAnd is converted client-side to:\n\n```html\n\u003ctime data-format=\"%B %e, %Y %l:%M%P\"\n      data-local=\"time\"\n      datetime=\"2013-11-27T23:43:22Z\"\n      title=\"November 27, 2013 6:43pm EDT\"\n      data-localized=\"true\"\u003eNovember 27, 2013 6:43pm\u003c/time\u003e\n```\n\n*(Line breaks added for readability)*\n\n## Time and date helpers\n\n```erb\n\u003c%= local_time(time) %\u003e\n```\n\nFormat with a strftime string (default format shown here)\n\n```erb\n\u003c%= local_time(time, '%B %e, %Y %l:%M%P') %\u003e\n```\n\nAlias for `local_time` with a month-formatted default\n\n```erb\n\u003c%= local_date(time, '%B %e, %Y') %\u003e\n```\n\nTo set attributes on the time tag, pass a hash as the second argument with a `:format` key and your attributes.\n\n```erb\n\u003c%= local_time(time, format: '%B %e, %Y %l:%M%P', class: 'my-time') %\u003e\n```\n\nTo use a strftime format already defined in your app, pass a symbol as the format.\n\n```erb\n\u003c%= local_time(date, :long) %\u003e\n```\n\nWhen using the `local_time` helper `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.\n\nWhen using the `local_date` helper, `I18n.t(\"date.formats.#{format}\")`, `I18n.t(\"time.formats.#{format}\")`, `Date::DATE_FORMATS[format]`, and `Time::DATE_FORMATS[format]` will be scanned (in that order) for your format.\n\nNote: 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`\n\n## Time ago helpers\n\n```erb\n\u003c%= local_time_ago(time) %\u003e\n```\n\nDisplays the relative amount of time passed. With age, the descriptions transition from {quantity of seconds, minutes, or hours} to {date + time} to {date}. The `\u003ctime\u003e` elements are updated every 60 seconds.\n\nExamples (in quotes):\n\n* Recent: \"a second ago\", \"32 seconds ago\", \"an hour ago\", \"14 hours ago\"\n* Yesterday: \"yesterday at 5:22pm\"\n* This week: \"Tuesday at 12:48am\"\n* This year: \"on Nov 17\"\n* Last year: \"on Jan 31, 2012\"\n\n## Relative time helpers\n\nPreset 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.\n\n```erb\n\u003c%= local_relative_time(time, 'weekday') %\u003e\n\u003c%= local_relative_time(time, type: 'time-or-date') %\u003e\n```\n\n**Available `:type` options**\n\n* `date` Includes the year unless it's current. \"Apr 11\" or \"Apr 11, 2013\"\n* `time-ago` See above. `local_time_ago` calls `local_relative_time` with this `:type` option.\n* `time-or-date` Displays the time if it occurs today or the date if not. \"3:26pm\" or \"Apr 11\"\n* `weekday` Displays \"Today\", \"Yesterday\", or the weekday (e.g. Wednesday) if the time is within a week of today.\n* `weekday-or-date` Displays the weekday if it occurs within a week or the date if not. \"Yesterday\" or \"Apr 11\"\n\n\n## Configuration\n\n**Internationalization (I18n)**\n\nLocal Time includes a [set of default `en` translations](lib/assets/javascripts/src/local-time/config/i18n.js) which can be updated directly. Or, you can provide an entirely new set in a different locale:\n\n```js\nLocalTime.config.i18n[\"es\"] = {\n  date: {\n    dayNames: [ … ],\n    monthNames: [ … ],\n    …\n  },\n  time: {\n    …\n  },\n  datetime: {\n    …\n  }\n}\n\nLocalTime.config.locale = \"es\"\n```\n\n\u003e [!NOTE]\n\u003e The \"default\" keys in the i18n configuration object are used for translations in LocalTime's `RelativeTime` module. They are not used to determine which format is rendered when none is provided. See https://github.com/basecamp/local_time/issues/128 for details.\n\n**24-hour time formatting**\nLocal Time supports 24-hour time formats out of the box.\n\nTo use this feature, configure the library to favor `data-format24` over `data-format` attributes:\n\n```js\nLocalTime.config.useFormat24 = true\n```\n\nThe library will now default to using the `data-format24` attribute on `\u003ctime\u003e` elements for formatting.\nBut it will still fall back to `data-format` if `data-format24` is not provided.\n\nThe included Rails helpers will automatically look for 24h variants of named formats.\nThey will search for `#{name}_24h` in [the same places](#time-and-date-helpers) the regular name is looked up.\n\nThis is an example of what your app configuration might look like:\n\n```ruby\nTime::DATE_FORMATS[:simple] = \"%-l:%M%P\"\nTime::DATE_FORMATS[:simple_24h] = \"%H:%M\"\n```\n\nWhen `:type` is set to `time-ago`, the format is obtained from the `I18n` [configuration](#configuration).\n\nIn practice, you might set `config.useFormat24` to `true` or `false` depending on the current user's configuration, before rendering any `\u003ctime\u003e` elements.\n\n## Contributing\nPlease read [CONTRIBUTING.md](./CONTRIBUTING.md).\n","funding_links":[],"categories":["JavaScript","CoffeeScript","Date and Time Processing"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasecamp%2Flocal_time","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasecamp%2Flocal_time","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasecamp%2Flocal_time/lists"}