GloomyDate

This project is a date calculation library developed by the FE developer GloomyStore.

Usage

It's simple.

Installation

• Node.js (ESM):

  • Install using npm i gloomydate.

• General HTML Project (MPA):

  • Add it using <script src='https://cdn.gloomy-store.com/gloomyDate/gloomyDate.cjs.js'></script>.

How to Use

ESM Method

import gloomyDate from 'gloomydate';

const result = gloomyDate.date('2022-05-02 14:10:44');
console.log(result); // Expected output: '1년 전'

MPA Method

<script src='https://cdn.gloomy-store.com/gloomyDate/gloomyDate.js'></script>
<script>
  const result = window.gloomyDate.date('2022-05-02 14:10:44', 'en');
  console.log(result); // Expected output: 'before 1 year'
</script>

Input

• Supports three input formats:

  1. String in the format '2023-04-25 14:55:40'
  2. String in the format '20230425145540'
  3. Int timestamp in the format 1723729654882 (number)
  4. Date object (JavaScript Date object)

  Example: gloomyDate.date('20230425145540') // Expected output: '1년 전' Example: gloomyDate.date(new Date()) // Output for the current time

• Language Option:

  • Supports ko, en, jp for three languages. The default output is in Korean if the second argument is not provided.
  • Example: gloomyDate.date('20230425145540', 'en') Expected output: 1 year ago

Output

• Returns an automatically calculated string:

  • Formats like X년 전, X달 전, X일 전, X시간 전, X분 전, 방금 전 in Korean.
  • If you pass en or jp as the second argument, the output will be in that language.

• Future Date Handling:

  • Now, it can handle future dates as well as past dates. Outputs like 1년 후, 2달 후, 3일 후 are possible. This is handled automatically by the gloomyDate.date function.
  • Example: gloomyDate.date('2025-08-15 10:00:00') // Expected output: '1년 후'
  • Example: gloomyDate.date('2023-10-01 10:00:00') // Expected output: '1달 전'

Real-World Usage Example

import gloomyDate from 'gloomydate';

const [data, setData] = useState([
  { title: 'title1', date: gloomyDate.date('2022-05-10 10:55:40') },
  { title: 'title2', date: gloomyDate.date('2023-02-11 15:50:30') },
  { title: 'title3', date: gloomyDate.date('2025-08-15 10:00:00') } // Example of a future date
]);

return (
  <div className="list-bg">
    {data.map((e, i) =>
      <div key={i}>
        <p className="date">{e.date}</p> {/* Expected output: '2달 전', '1년 전', '1년 후' */}
      </div>
    )}
  </div>
);

Example of Rendered HTML

<div class="list-bg">
    <p class="date">11달 전</p>
    <p class="date">2달 전</p>
    <p class="date">1년 후</p>
</div>

Getting Started

Install the gloomydate module by running npm install gloomydate in your terminal. After installation, start the app with npm start or yarn start.

Now, you can easily use GloomyDate in both ESM and MPA environments, and it can handle both past and future dates! 🎉