<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Vahid Afshari</title>
    <description>The latest articles on DEV Community by Vahid Afshari (@vahid_afshari_c08e82fa58f).</description>
    <link>https://dev.to/vahid_afshari_c08e82fa58f</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3836716%2Fd5f84625-43af-4a2c-bbd4-3fa38d1d3a4b.jpg</url>
      <title>DEV Community: Vahid Afshari</title>
      <link>https://dev.to/vahid_afshari_c08e82fa58f</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vahid_afshari_c08e82fa58f"/>
    <language>en</language>
    <item>
      <title>Bringing History to the Modern Web: Introducing moment-shahanshahi for JavaScript &amp; React 👑</title>
      <dc:creator>Vahid Afshari</dc:creator>
      <pubDate>Sat, 21 Mar 2026 08:18:22 +0000</pubDate>
      <link>https://dev.to/vahid_afshari_c08e82fa58f/bringing-history-to-the-modern-web-introducing-moment-shahanshahi-for-javascript-react-4jm4</link>
      <guid>https://dev.to/vahid_afshari_c08e82fa58f/bringing-history-to-the-modern-web-introducing-moment-shahanshahi-for-javascript-react-4jm4</guid>
      <description>&lt;p&gt;As developers, we often deal with timezones and calendars. While the Gregorian calendar is the global standard, many cultures use their own traditional systems. In the Iranian context, while the Solar Hijri (Jalaali) calendar is widely used, there is also the Iranian Imperial (Shahanshahi) Calendar system dating back to the founding of the Achaemenid Empire by Cyrus the Great.&lt;br&gt;
Today, I’m excited to introduce moment-shahanshahi, a lightweight npm package that makes it incredibly easy to integrate the Shahanshahi calendar into your JavaScript and React applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why a new package?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;While there are excellent libraries like moment-jalaali for Persian dates, converting those dates to the Imperial era (which starts 1,180 years before the Hijri era) usually requires manual calculations and custom formatting logic.&lt;br&gt;
I built moment-shahanshahi to bridge this gap, providing a seamless wrapper around the reliable moment core while adding specific support for the Imperial era.&lt;br&gt;
Key Features&lt;br&gt;
✅ Familiar Syntax: Built on top of moment-jalaali, so if you know Moment.js, you already know how to use this.&lt;br&gt;
✅ Custom Tokens: Introducing sYYYY and sYY tokens specifically for Shahanshahi years.&lt;br&gt;
✅ React Ready: Comes with a built-in React component (ShahanshahiDate) for quick UI implementation.&lt;br&gt;
✅ Precision: Uses the same astronomical calculations as the Jalaali calendar, ensuring perfect accuracy.&lt;br&gt;
Getting Started&lt;br&gt;
You can install it via npm or yarn:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install moment-shahanshahi moment&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;1. Using it in Vanilla JavaScript&lt;/strong&gt;&lt;br&gt;
You can format any date into the Shahanshahi era using the .sFormat() method:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;moment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;moment-shahanshahi&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Current date in Shahanshahi format (e.g., 2583/01/01)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;moment&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;sFormat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sYYYY/jMM/jDD&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="c1"&gt;// Converting a historical date&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;date&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;moment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1971-10-12&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sFormat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sYYYY [Year of the] jMMMM&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="c1"&gt;// Output: 2530 Year of the Mehr&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Using it in React&lt;/strong&gt;&lt;br&gt;
For React developers, I've included a handy component to keep your JSX clean:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ShahanshahiDate&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;moment-shahanshahi&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Current Era:&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ShahanshahiDate&lt;/span&gt; 
        &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; 
        &lt;span class="na"&gt;format&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"sYYYY/jMM/jDD"&lt;/span&gt; 
        &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"imperial-text"&lt;/span&gt; 
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;The Logic Behind the Calendar&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Shahanshahi calendar is mathematically identical to the Solar Hijri (Jalaali) calendar in terms of leap years and month lengths. The only difference is the epoch (starting point).&lt;br&gt;
The conversion logic is simple yet effective:&lt;br&gt;
Shahanshahi Year = Jalaali Year + 1180&lt;br&gt;
By leveraging moment-jalaali, this package ensures that all month names, days, and leap-year calculations remain 100% accurate while simply shifting the year to the Imperial era.&lt;br&gt;
Open Source &amp;amp; Contributions&lt;br&gt;
This project is open-source and I would love to hear your feedback! Whether it's adding support for other date libraries (like Day.js) or improving the React hooks, contributions are always welcome.&lt;/p&gt;

&lt;p&gt;NPM: &lt;a href="https://www.npmjs.com/package/moment-shahanshahi" rel="noopener noreferrer"&gt;moment-shahanshahi&lt;/a&gt;&lt;br&gt;
GitHub:&lt;a href="https://github.com/vahidinline/moment-shahanshahi" rel="noopener noreferrer"&gt;GitHub Repo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you find this useful, feel free to give it a ⭐️ on GitHub and share it with other developers working on Persian-localized application&lt;/p&gt;

</description>
      <category>calendar</category>
      <category>moment</category>
      <category>shahanshahi</category>
      <category>react</category>
    </item>
  </channel>
</rss>
