Code Monkey home page Code Monkey logo

ant-design-jalali's Introduction

Jalali dates and times for ant-design

This is a fork of jalali-moment and it's modified just to use with ant-design so if you want use it just for jalali dates and time you should go to jalali-moment page and see the original docs

Read this in other languages: فارسی

It was a fork of moment-jalali but the main goal of this repository is to facilitate converting any library using moment.js to be compatible with jalali calendar system. List of packages use jalali-moment to convert calendar system.

MIT License NPM version

Please take a look at day.js, jalaliday module.

How to

  • Install

  • Use jalali moment in

    This plugin provides using jalali and gregorian calendar system together on momentjs api.

    .locale('fa'); it will use jalali calendar system

    .locale('any other locale'); it will use gregorian calendar system

Introduction

jalali(Persian) calendar is a solar calendar system. It gains approximately 1 day on the Julian calendar every 128 years. Read more on Wikipedia.

Calendar conversion is based on the algorithm provided by Kazimierz M. Borkowski and has a very good performance.

This plugin adds Jalali (Persian, Khorshidi, Shamsi) calendar system to moment.js library.

Install

Install via npm

npm install antd-jalali-moment -S

Install via yarn

yarn add antd-jalali-moment

Install via bower

bower install antd-jalali-moment --save

change webpack config and use alias for changing moment to antd-jalali-moment.

if you use react-app-rewired you can use this config.overrides.js

config.overrides.js

const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");

module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", style: true }],
    config
  );
  config = injectBabelPlugin(["syntax-dynamic-import"], config);
  config.resolve.alias["moment"] = "antd-jalali-moment"; // this is where we use alias
  return config;
};

Usage

ant-design

Install it via npm or yarn then wrap your App component in LocaleProvider component.

import React from "react";
import ReactDOM from "react-dom";
import { LocaleProvider } from "antd";
import fa_IR from "antd/lib/locale-provider/fa_IR";
import "moment/locale/fa";
import moment from "moment";
import App from "./App";

moment.locale("fa");

ReactDOM.render(
  <LocaleProvider locale={fa_IR}>
    <App />
  </LocaleProvider>,
  document.getElementById("root")
);

Basically with installing this package you bring jalali dates and time to LocaleProvider component so if you use redux or else and change language and locale at any time, dates and time goes back to original date system.

API

for using the original jalali-moment api read the original docs HERE.

ant-design-jalali's People

Contributors

fingerpich avatar behrang avatar vahidalizad avatar pouriamaleki avatar mehdykarimpour avatar omidas avatar pouyamn avatar dependabot[bot] avatar rzkhosroshahi avatar ahmadx87 avatar behzad888 avatar bitdeli-chef avatar hamedfathi avatar miladmeidanshahi avatar mvalipour avatar shahabganji avatar arastu avatar saadatfar avatar sajadkiani avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.