{"id":9593,"date":"2021-09-27T06:29:26","date_gmt":"2021-09-27T06:29:26","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=9593"},"modified":"2022-06-13T13:41:00","modified_gmt":"2022-06-13T13:41:00","slug":"best-react-date-picker-components","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/best-react-date-picker-components\/","title":{"rendered":"Top 15 Free Best React Date Picker Components to use in 2022"},"content":{"rendered":"\n<p>Do you want to employ the <strong>best React Date Picker components<\/strong> in your next project? You&#8217;ve come to the right place. They&#8217;re right down the road! I&#8217;ve carefully chosen the<strong> top 15 free best React Date Pickers<\/strong> for React Projects in this blog post. But first, let&#8217;s take a quick look at what React Date Picker is all about.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">React Datepicker<\/h2>\n\n\n\n<p>A <strong>date picker<\/strong>, also known as a <strong>popup calendar<\/strong>, <strong>date and time picker<\/strong>, or <strong>time picker<\/strong>, is a graphical user interface widget that allows the user to choose a date from a calendar and\/or a time from a time range. Thus, React datepicker components also do the same job. React Datepicker components are a particular kind of User Interface components that are based on React.js. <\/p>\n\n\n\n<p>These simple reusable components have become the most popular libraries for React. <\/p>\n\n\n\n<p><strong>Note: <\/strong>Before selecting a Date Picker for your project, please carefully review the demonstrations, specifications, and requirements. It is best to go through Github repositories for a detailed inspection. Different types of work are supported by different React datepickers. So, double-check that the prerequisites fully match your system or, if necessary, install them first.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">What Is So Great About React Datepickers?  <\/h2>\n\n\n\n<p>The finest datepicker components are React Datepicker components. These points demonstrate why. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Users can set or choose the date with just a mouse. <\/li><li>Eliminates the need to write down the date. <\/li><li>Excellent Community Support.<\/li><li>Blazingly Fast.<\/li><li>Reusable components.<\/li><li>Simple &amp; modern Looking. <\/li><li>Easy to Set Up.<\/li><li>Light Weight.<\/li><\/ul>\n\n\n\n<p>and a lot of other aspects that make React.js Datepicker components one of the best. <\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">Best React Date Picker Components<\/h2>\n\n\n\n<p><strong>Note:<\/strong> The list below is in no particular order. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Wojtekmaj \/ React Date Picker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"381\" height=\"340\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/wojtekmaj-react-date-picker-1.png\" alt=\"Wojtekmaj \/ React Date Picker\" class=\"wp-image-9603\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/wojtekmaj-react-date-picker-1.png 381w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/wojtekmaj-react-date-picker-1-300x268.png 300w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/projects.wojtekmaj.pl\/react-date-picker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Date Picker<\/li><li>Time Picker<\/li><li>DateTime Range Picker<\/li><li>Time Range Picker<\/li><li>Date Range Picker<\/li><li>DateTime Picker<\/li><li>Calendar <\/li><li>Clock<\/li><li>Customizable <\/li><li>Lightweight Library<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/wojtekmaj\/react-date-picker\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-date-picker --save<\/pre>\n\n\n\n<p><strong>Code Snippet <\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { useState } from &#039;react&#039;;\nimport DatePicker from &#039;react-date-picker&#039;;\n\nexport default function MyDatePicker() {\n  const &#x5B;value, updateValue] = useState(new Date());\n\n  const onChange = (date) =&gt; {\n    updateValue(date);\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;DatePicker\n        onChange={onChange}\n        value={value}\n      \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">2. <strong>React day picker<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"321\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-day-picker-1.png\" alt=\"React day picker\" class=\"wp-image-9600\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-day-picker-1.png 291w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-day-picker-1-272x300.png 272w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"http:\/\/react-day-picker.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple Library<\/li><li>Easy to customize <\/li><li>Localizable <\/li><li>extensive list of examples<\/li><li>Native TypeScript Support<\/li><li>Date Picker<\/li><li>ARIA Support <\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/gpbl\/react-day-picker\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command <\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-day-picker --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong> <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport DayPickerInput from &quot;react-day-picker\/DayPickerInput&quot;;\nimport &quot;react-day-picker\/lib\/style.css&quot;;\n\nexport default function ReactDayPicker() {\n  const &#x5B;date, setDate] = useState(new Date());\n\n  function onChange(date) {\n    setDate(date);\n  }\n\n  return &lt;DayPickerInput onDayChange={onChange} \/&gt;;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-material-ui-date-time-picker\">3. Material UI Date\/Time Picker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"353\" height=\"388\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Image.png\" alt=\"Material UI Date\/Time Picker\" class=\"wp-image-9597\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Image.png 353w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Image-273x300.png 273w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/mui.com\/components\/pickers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Follows Material UI Design <\/li><li>Supports 4 different date library ( date-fns, Day.js, Luxon, Moment.js)<\/li><li>DatePicker<\/li><li>Time Picker<\/li><li>DateTime Picker<\/li><li>Date Range Picker<\/li><li>Localizable<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/mui-org\/material-ui\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong> <\/p>\n\n\n\n<p>Core Material UI Library:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install @material-ui\/core date-fns @date-io\/date-fns@^1.3.13 @material-ui\/pickers --save<\/pre>\n\n\n\n<p><strong>Code<\/strong> <strong>Snippet <\/strong><\/p>\n\n\n\n<p> <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { useState } from &#039;react&#039;;\nimport DateFnsUtils from &#039;@date-io\/date-fns&#039;;\nimport {\n  MuiPickersUtilsProvider,\n  KeyboardDatePicker,\n} from &#039;@material-ui\/pickers&#039;;\n\nexport default function MaterialDatePicker() {\n\n  const &#x5B;selectedDate, setSelectedDate] = useState(new Date());\n\n  const handleDateChange = (date) =&gt; {\n    setSelectedDate(date);\n  };\n\n  return (\n    &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;\n      &lt;KeyboardDatePicker\n        disableToolbar\n        variant=&quot;inline&quot;\n        format=&quot;MM\/dd\/yyyy&quot;\n        margin=&quot;normal&quot;\n        id=&quot;date-picker-inline&quot;\n        label=&quot;Date picker inline&quot;\n        value={selectedDate}\n        onChange={handleDateChange}\n        KeyboardButtonProps={{\n          &#039;aria-label&#039;: &#039;change date&#039;,\n        }}\n      \/&gt;\n    &lt;\/MuiPickersUtilsProvider&gt;\n  );\n\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">4. <strong>Carbon Design System DatePicker<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"329\" height=\"378\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/carbon-datepicker-1.png\" alt=\"Carbon Design System DatePicker\" class=\"wp-image-9602\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/carbon-datepicker-1.png 329w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/carbon-datepicker-1-261x300.png 261w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/www.carbondesignsystem.com\/components\/date-picker\/usage\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Date Picker <\/li><li>IBM&#8217;s Open-Source Design System<\/li><li>Supports React, Vue, Angular, Svelte, Vanilla JS<\/li><li>Fully Customizable by using <a href=\"https:\/\/flatpickr.js.org\/options\/\" target=\"_blank\" rel=\"noreferrer noopener\">flatpickr options<\/a>.<\/li><li>Easy to Use<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/carbon-design-system\/carbon\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong> <\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install carbon-components carbon-components-react carbon-icons --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong> <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport { DatePickerInput } from &#039;carbon-components-react&#039;;\n\nexport default function CarbonDatePicker() {\n\n  return (\n    &lt;DatePickerInput\n        placeholder=&quot;mm\/dd\/yyyy&quot;\n        labelText=&quot;Date Picker label&quot;\n        id=&quot;date-picker-single&quot;\n        onChange={date =&gt; {\n          console.log(date);\n        }}\n      \/&gt;\n    &lt;\/DatePicker&gt;  \n  );\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">5. Airbnb React Dates<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"356\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Airbnb-React-Date-Picker-1.png\" alt=\"bnb React Dates\" class=\"wp-image-9604\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Airbnb-React-Date-Picker-1.png 650w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Airbnb-React-Date-Picker-1-300x164.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Main Features<\/strong> <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Mobile Friendly<\/li><li>Localizable<\/li><li>Date Picker<\/li><li>date Range Picker<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/airbnb\/react-dates\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-dates --save<\/pre>\n\n\n\n<p><strong>Code Snippet <\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport &quot;react-dates\/initialize&quot;;\nimport &quot;react-dates\/lib\/css\/_datepicker.css&quot;;\nimport { SingleDatePicker } from &quot;react-dates&quot;;\n\nexport default function ReactdatesDatepicker() {\n  const &#x5B;date, setDate] = useState(null);\n  const &#x5B;isFocused, setIsFocused] = useState(false);\n\n  function onDateChange(date) {\n    setDate(date);\n  }\n\n  function onFocusChange({ focused }) {\n    setIsFocused(focused);\n  }\n\n  return (\n    &lt;SingleDatePicker\n      id=&quot;date_input&quot;\n      date={date}\n      focused={isFocused}\n      onDateChange={onDateChange}\n      onFocusChange={onFocusChange}\n    \/&gt;\n  );\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">6. React Datepicker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"241\" height=\"239\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-datepicker-by-hacker-1.png\" alt=\"React Datepicker\" class=\"wp-image-9605\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-datepicker-by-hacker-1.png 241w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-datepicker-by-hacker-1-150x150.png 150w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/reactdatepicker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Reusable <\/li><li>Easy to Use<\/li><li>Simple Design <\/li><li>date-fns for localization<\/li><li>Date Picker <\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/Hacker0x01\/react-datepicker\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-datepicker --save<\/pre>\n\n\n\n<p><strong>Code Snippet <\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport DatePicker from &quot;react-datepicker&quot;;\nimport &quot;react-datepicker\/dist\/react-datepicker.css&quot;;\n\nexport default function HackeroneDatepicker() {\n  const &#x5B;date, setDate] = useState(new Date());\n\n  function onChange(date) {\n    setDate(date);\n  }\n\n  return &amp;lt;DatePicker selected={date} onChange={onChange} \/&gt;;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">7. React Rainbow Components Date Picker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"367\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-rainbow-component-datepicker-1.png\" alt=\"React Rainbow Components Date Picker\" class=\"wp-image-9607\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-rainbow-component-datepicker-1.png 380w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/react-rainbow-component-datepicker-1-300x290.png 300w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/react-rainbow.io\/#\/DatePicker\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Note:<\/strong> React Rainbow is a UI component library. You have to adopt the whole library to use it.<\/p>\n\n\n\n<p><strong>Main Features <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Date Picker<\/li><li>DateTime Picker<\/li><li>Date Picker Modal<\/li><li>Simple Design<\/li><li>Supports Dark Mode<\/li><li>Customizable<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/nexxtway\/react-rainbow\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-rainbow-components --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport { DatePicker } from &quot;react-rainbow-components&quot;;\n\nexport default function RainbowDatepicker() {\n  const &#x5B;date, setDate] = useState(null);\n\n  function onChange(date) {\n    setDate(date);\n  }\n\n  return (\n    &amp;lt;DatePicker\n      id=&quot;datePicker-1&quot;\n      value={date}\n      onChange={onChange}\n      label=&quot;DatePicker Label&quot;\n      formatStyle=&quot;large&quot;\n    \/&gt;\n  );\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">8. Ant Design DatePicker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"315\" height=\"338\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Ant-Design-Date-Picker-1.png\" alt=\"Ant Design DatePicker\" class=\"wp-image-9608\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Ant-Design-Date-Picker-1.png 315w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Ant-Design-Date-Picker-1-280x300.png 280w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/ant.design\/components\/date-picker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Date Picker<\/li><li>TIme Picker<\/li><li>DateTime Picker<\/li><li>Date Range Picker<\/li><li>Provides a UI Component Library<\/li><li>Localizable <\/li><li>TypeScript Support<\/li><li>Customizable<\/li><li>Follows Ant Design Specification<\/li><li>Smple Design<\/li><li>Better User Experience <\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/ant-design\/ant-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install antd --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport { DatePicker } from &quot;antd&quot;;\nimport &quot;antd\/dist\/antd.css&quot;;\n\nexport default function AntDatepicker() {\n  const &#x5B;date, setDate] = useState(new Date());\n\n  function onChange(date, dateString) {\n    setDate(date);\n  }\n\n  return &amp;lt;DatePicker onChange={onChange} \/&gt;;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">9. <strong>Hypeserver \/ React Date Range<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"292\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Hypeserver-React-Date-Picker-1.png\" alt=\"Hypeserver \/ React Date Range\" class=\"wp-image-9609\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Hypeserver-React-Date-Picker-1.png 330w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Hypeserver-React-Date-Picker-1-300x265.png 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/figure><\/div>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/hypeserver.github.io\/react-date-range\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Calendar Input <\/li><li>Date Range Picker<\/li><li>Highly Customizable <\/li><li>Click &amp; Hold Selection <\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/hypeserver\/react-date-range\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-date-range date-fns --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React, { useState } from &quot;react&quot;;\nimport { Calendar } from &quot;react-date-range&quot;;\nimport &quot;react-date-range\/dist\/styles.css&quot;;\nimport &quot;react-date-range\/dist\/theme\/default.css&quot;;\n\nexport default function HypeserverDatepicker() {\n  const &#x5B;date, setDate] = useState(new Date());\n\n  function onChange(date) {\n    setDate(date);\n  }\n\n  return &amp;lt;Calendar date={date} onChange={onChange} \/&gt;;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">10. <strong>RC Datepicker<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"211\" height=\"242\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/RC-Datepicker-1.png\" alt=\"RC Datepicker\" class=\"wp-image-9615\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/rawgit.com\/buildo\/react-semantic-datepicker\/master\/examples\/build\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Decent Design<\/li><li>DatePicker<\/li><li>Easy to Set Up<\/li><li>Customizable<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/chenxsan\/react-date-picker-cs\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command <\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install --save rc-datepicker<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\n\n\/\/ Import Datepicker\nimport { DatePicker, DatePickerInput } from &#039;rc-datepicker&#039;;\n\n\/\/ Import the default style\nimport &#039;rc-datepicker\/lib\/style.css&#039;;\n \nexport default class App extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n\n        \/\/ Initial state with date\n        this.state = {\n            \/\/ or Date or Moment.js\n            selectedDate: &#039;2017-08-13&#039;\n        };\n\n        \/\/ This binding is necessary to make `this` work in the callback\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(date) {\n\t\tthis.setState({\n\t\t\tselectedDate: date\n\t\t});\n\t}\n\n    render() {\n        return (\n            &lt;div&gt;\n                &lt;DatePickerInput\n                    onChange={this.onChange}\n                    value={this.state.selectedDate}\n                    className=&#039;my-custom-datepicker-component&#039;\n                \/&gt;\n\n                {\/* this renders only a fixed datepicker *\/}\n                &lt;DatePicker onChange={this.onChange} value={this.state.selectedDate} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">11. <strong>React Datepicker CS<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"235\" height=\"255\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-DatePicker-CS-1.png\" alt=\"React Datepicker CS\" class=\"wp-image-9614\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"http:\/\/chenxsan.github.io\/react-date-picker-cs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Siplified DatePicker<\/li><li>Simple Installation<\/li><li>Multi-Language Support<\/li><li>Only Have 5 Properties<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/chenxsan\/react-date-picker-cs\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install react-date-picker-cs --save\n<\/pre><\/div>\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\n\n\/\/ Import Datepicker\nimport ReactDatePicker from &#039;react-date-picker-cs&#039;;\n \nexport default class App extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n\n        \/\/ Initial state with date\n        this.state = {\n            selectedDate: &#039;2017-08-13&#039;\n        };\n\n        \/\/ This binding is necessary to make `this` work in the callback\n        this.handleLog = this.handleLog.bind(this);\n    }\n\n    handleLog(date) {\n\t\tthis.setState({\n\t\t\tselectedDate: date\n\t\t});\n\t}\n\n    render() {\n        return (\n            &lt;div&gt;\n                &lt;ReactDatePicker\n                    onChange={this.handleLog} \n                    range={&#x5B;2013, 2020]} \n                    value={this.state.selectedDate} \n                    disabled={true}\n                \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">12. Input Moment<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"348\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Input-Moment-1.png\" alt=\"Input Moment\" class=\"wp-image-9618\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Input-Moment-1.png 273w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/Input-Moment-1-235x300.png 235w\" sizes=\"auto, (max-width: 273px) 100vw, 273px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/wangzuo.github.io\/input-moment\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Note:<\/strong> This module requires Moment.js as a peerDependency.<\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>DateTime Picker<\/li><li>Icons from Ionicons <\/li><li>Powered by Moment.js<\/li><li>ISC License <\/li><li>Easy to Install<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/wangzuo\/input-moment\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm i input-moment --save<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport &#039;..\/src\/less\/input-moment.less&#039;;\nimport &#039;.\/app.less&#039;;\nimport moment from &#039;moment&#039;;\nimport React, { Component } from &#039;react&#039;;\nimport ReactDOM from &#039;react-dom&#039;;\nimport InputMoment from &#039;..\/src\/input-moment&#039;;\nimport packageJson from &#039;..\/package.json&#039;;\n\nclass App extends Component {\n  state = {\n    m: moment()\n  };\n\n  handleChange = m =&gt; {\n    this.setState({ m });\n  };\n\n  handleSave = () =&gt; {\n    console.log(&#039;saved&#039;, this.state.m.format(&#039;llll&#039;));\n  };\n\n  render() {\n    return (\n      &amp;lt;div className=&quot;app&quot;&gt;\n        &amp;lt;h1&gt;\n          {packageJson.name}: {packageJson.version}\n        &amp;lt;\/h1&gt;\n        &amp;lt;h2&gt;{packageJson.description}&amp;lt;\/h2&gt;\n        &amp;lt;form&gt;\n          &amp;lt;div className=&quot;input&quot;&gt;\n            &amp;lt;input type=&quot;text&quot; value={this.state.m.format(&#039;llll&#039;)} readOnly \/&gt;\n          &amp;lt;\/div&gt;\n          &amp;lt;InputMoment\n            moment={this.state.m}\n            onChange={this.handleChange}\n            minStep={5}\n            onSave={this.handleSave}\n          \/&gt;\n        &amp;lt;\/form&gt;\n      &amp;lt;\/div&gt;\n    );\n  }\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">13. React Bootstrap Datepicker<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"262\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-Bootstrap-DatePicker-1.png\" alt=\"React Bootstrap Datepicker\" class=\"wp-image-9616\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"http:\/\/pushtell.github.io\/react-bootstrap-date-picker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Note:<\/strong> For this one, you have to import the Bootstrap theme.<\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bootstrap based<\/li><li>Minimal Design<\/li><li>Date Picker<\/li><li>Customizable<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/pushtell\/react-bootstrap-date-picker\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command <\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-bootstrap-date-picker<\/pre>\n\n\n\n<p><strong>Code Snippet<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\n\n\/\/ Import Datepicker\nimport DatePicker from &quot;react-bootstrap-date-picker&quot;;\n\n\/\/ Import Bootstrap components\nimport FormGroup from &#039;react-bootstrap\/lib\/FormGroup&#039;;\nimport ControlLabel from &#039;react-bootstrap\/lib\/ControlLabel&#039;;\nimport HelpBlock from &#039;react-bootstrap\/lib\/HelpBlock&#039;;\n\nexport default class App extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n\n        \/\/ Initial state with date\n        this.state = {\n            selectedDate: new Date().toISOString()\n        };\n\n        \/\/ This binding is necessary to make `this` work in the callback\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value, formattedValue) {\n\t\tthis.setState({\n            value: value, \/\/ ISO String, ex: &quot;2016-11-19T12:00:00.000Z&quot;\n            formattedValue: formattedValue \/\/ Formatted String, ex: &quot;11\/19\/2016&quot;\n        });\n\t}\n\n    componentDidUpdate() {\n        \/\/ Access ISO String and formatted values from the DOM.\n        var hiddenInputElement = document.getElementById(&quot;example-datepicker&quot;);\n        console.log(hiddenInputElement.value); \/\/ ISO String, ex: &quot;2016-11-19T12:00:00.000Z&quot;\n        console.log(hiddenInputElement.getAttribute(&#039;data-formattedvalue&#039;)) \/\/ Formatted String, ex: &quot;11\/19\/2016&quot;\n    }\n\n    render() {\n        return (\n            &lt;div&gt;\n                &lt;FormGroup&gt;\n                    &lt;ControlLabel&gt;Label&lt;\/ControlLabel&gt;\n                    &lt;DatePicker id=&quot;example-datepicker&quot; value={this.state.selectedDate} onChange={this.onChange} \/&gt;\n                    &lt;HelpBlock&gt;Help&lt;\/HelpBlock&gt;\n                &lt;\/FormGroup&gt;\n            &lt;\/div&gt;\n        );\n    }\n}\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">13. <strong>React Infinite Calendar<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"455\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-infinite-Date-Picker-1.png\" alt=\"React Infinite Calendar\" class=\"wp-image-9620\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-infinite-Date-Picker-1.png 297w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-infinite-Date-Picker-1-196x300.png 196w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"http:\/\/clauderic.github.io\/react-infinite-calendar\/#\/basic-settings\/basic-configuration?_k=62xzqi\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Infinite Scrolling  <\/li><li>Flexiblity <\/li><li>Localizable <\/li><li>Customizable <\/li><li>Date Picker <\/li><li>Extensible <\/li><li>Mobile-Friendly<\/li><li>keyboard Support<\/li><li>Events and Call Back<\/li><li>Themes<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/clauderic\/react-infinite-calendar\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-infinite-calendar --save<\/pre>\n\n\n\n<p><strong>Usage<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport { render } from &#039;react-dom&#039;;\nimport InfiniteCalendar from &#039;react-infinite-calendar&#039;;\nimport &#039;react-infinite-calendar\/styles.css&#039;; \/\/ only needs to be imported once\n\n\/\/ Render the Calendar\nvar today = new Date();\nvar lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);\n\nrender(\n  &lt;InfiniteCalendar\n    width={400}\n    height={600}\n    selected={today}\n    disabledDays={&#x5B;0,6]}\n    minDate={lastWeek}\n  \/&gt;,\n  document.getElementById(&#039;root&#039;)\n);\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">15. React Input Calendar<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"244\" height=\"269\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2021\/09\/React-input-Calendar-1.png\" alt=\"React Input Calendar\" class=\"wp-image-9619\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"http:\/\/rudeg.github.io\/react-input-calendar\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Preview \/ Details<\/a><\/strong><\/p>\n\n\n\n<p><strong>Main Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple Component<\/li><li>All Systems written in CSS<\/li><li>Date Input Calendar <\/li><li>Minimal Design<\/li><li>Easy to Install<\/li><\/ul>\n\n\n\n<p><strong><a class=\"button\" href=\"https:\/\/github.com\/Rudeg\/react-input-calendar\" target=\"_blank\" rel=\"noreferrer noopener\">Github Link<\/a><\/strong><\/p>\n\n\n\n<p><strong>Installation Command<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install react-input-calendar<\/pre>\n\n\n\n<p><strong>Usage<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import Calendar from 'react-input-calendar'\n&lt;Calendar format='DD\/MM\/YYYY' date='4-12-2014' \/&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong> <\/h2>\n\n\n\n<p>Finally, it appears that your quest for the finest Vue datepicker has come to an end. Choosing amongst these free React.js date pickers is a challenging challenge. However, if you keep to your criteria, you should be able to quickly narrow down 3 to 4 date pickers that would work best for your project. So, do a thorough examination of these datepicker components and achieve&nbsp;a positive user experience. Thank you for being with us, and we wish you all the best.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">About Us<\/h2>\n\n\n\n<p>We provide high-quality free and premium templates, UI kits, and design systems for customers and developers at <a href=\"https:\/\/ui-lib.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI-Lib<\/a>. React, Angular, Vue, HTML, and other technologies are used to do this. We place a premium on high quality, extensive expertise, and optimism. On <a href=\"https:\/\/themeforest.net\/user\/ui-lib\/portfolio\" target=\"_blank\" rel=\"noreferrer noopener\">Themeforest<\/a>, we now have over 9000 sales.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/uilib.gumroad.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Our Gumroad Profile<\/a><\/strong><\/p>\n\n\n\n<p>You can also find the best Vue Datepicker components here. <\/p>\n\n\n\n<p><a href=\"https:\/\/ui-lib.com\/blog\/best-vue-datepicker-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top 15 Free Best Vue Datepicker components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to employ the best React Date Picker components in your next project? You&#8217;ve come to the right place. They&#8217;re right down the&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ui-lib.com\/blog\/best-react-date-picker-components\/\">Continue reading<span class=\"screen-reader-text\">Top 15 Free Best React Date Picker Components to use in 2022<\/span><\/a><\/div>\n","protected":false},"author":3,"featured_media":10544,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[141],"tags":[],"class_list":["post-9593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","entry"],"_links":{"self":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/comments?post=9593"}],"version-history":[{"count":13,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9593\/revisions"}],"predecessor-version":[{"id":10511,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/9593\/revisions\/10511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media\/10544"}],"wp:attachment":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media?parent=9593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/categories?post=9593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/tags?post=9593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}