{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/41","result":{"data":{"post":{"title":"Reactコンポーネント紹介! 今回は、日付の範囲選択ができる「react-date-range」!","author":{"name":"reoring","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"株式会社クラフトマンソフトウェア代表 | Schoo講師 | 分報発祥の会社 | YYPHP主催 | マンガでわかるDocker監修 | 実践ドメイン駆動設計レビュア | 自動受け入れテスト ShouldBee http://shouldbee.at/"},"date":"2015年10月13日","tags":["React","component"],"category":"プログラミング","body":"<a href=\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/18e9c40a-0296-48f6-b4cb-d58abeddca2e.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img width=\"1200\" alt=\"image.png (115.6 kB)\" src=\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/18e9c40a-0296-48f6-b4cb-d58abeddca2e.png\"></a>\n<p data-sourcepos=\"3:1-4:91\">こんにちは! れおりんです!! 朝と夜は大分肌寒くなってきましたね〜!<br>\n今回は、Reactコンポーネントの「react-date-range」を紹介していきます!</p>\n<h1 data-sourcepos=\"6:1-6:8\" id=\"1-0-0\" name=\"1-0-0\">\n<a class=\"anchor\" id=\"デモ\" name=\"%E3%83%87%E3%83%A2\" href=\"#%E3%83%87%E3%83%A2\" data-position=\"1-0-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"デモ\"> &gt; デモ</span></a>デモ</h1>\n<p data-sourcepos=\"8:1-8:99\">以下のようにスタイリッシュな日付範囲選択コンポーネントが作れます。</p>\n<p data-sourcepos=\"10:1-10:31\">↓ 実際に操作できます</p>\n<div id=\"react-component\">\n  <div id=\"root\"></div>\n  <script src=\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/67fd8fc6-1903-48e9-a4c7-ca62367c8ab3.js\"></script>\n</div>\n<p data-sourcepos=\"17:1-17:71\"><a href=\"http://adphorus.github.io/react-date-range/\" target=\"_blank\" rel=\"noopener noreferrer\">もっと沢山のデモ</a></p>\n<h2 data-sourcepos=\"19:1-19:33\" id=\"1-1-0\" name=\"1-1-0\">\n<a class=\"anchor\" id=\"このデモのメイン部分\" name=\"%E3%81%93%E3%81%AE%E3%83%87%E3%83%A2%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E9%83%A8%E5%88%86\" href=\"#%E3%81%93%E3%81%AE%E3%83%87%E3%83%A2%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E9%83%A8%E5%88%86\" data-position=\"1-1-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"このデモのメイン部分\"> &gt; このデモのメイン部分</span></a>このデモのメイン部分</h2>\n<div class=\"code-block\" data-sourcepos=\"21:1-39:3\">\n<div class=\"code-filename\">\n<i class=\"fa fa-file-code-o\"></i>jsx</div>\n<div class=\"highlight\"><pre class=\"highlight jsx\"><code><span class=\"nx\">render</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"kd\">const</span> <span class=\"p\">{</span> <span class=\"nx\">rangePicker</span><span class=\"p\">,</span> <span class=\"nx\">linked</span><span class=\"p\">,</span> <span class=\"nx\">datePicker</span><span class=\"p\">,</span> <span class=\"nx\">predefined</span> <span class=\"p\">}</span> <span class=\"o\">=</span> <span class=\"k\">this</span><span class=\"p\">.</span><span class=\"nx\">state</span><span class=\"p\">;</span>\n  <span class=\"kd\">const</span> <span class=\"nx\">format</span> <span class=\"o\">=</span> <span class=\"dl\">'</span><span class=\"s1\">dddd, D MMMM YYYY</span><span class=\"dl\">'</span><span class=\"p\">;</span>\n\n  <span class=\"k\">return</span> <span class=\"p\">(</span>\n    <span class=\"p\">&lt;</span><span class=\"nt\">main</span> <span class=\"na\">className</span><span class=\"p\">=</span><span class=\"si\">{</span><span class=\"nx\">styles</span><span class=\"p\">[</span><span class=\"dl\">'</span><span class=\"s1\">Main</span><span class=\"dl\">'</span><span class=\"p\">]</span><span class=\"si\">}</span><span class=\"p\">&gt;</span>\n        <span class=\"p\">&lt;</span><span class=\"nc\">DateRange</span>\n          <span class=\"na\">startDate</span><span class=\"p\">=</span><span class=\"s\">'10/11/2015'</span>\n          <span class=\"na\">endDate</span><span class=\"p\">=</span><span class=\"si\">{</span> <span class=\"nx\">now</span> <span class=\"o\">=&gt;</span> <span class=\"p\">{</span>\n            <span class=\"k\">return</span> <span class=\"dl\">'</span><span class=\"s1\">11/12/2015</span><span class=\"dl\">'</span><span class=\"p\">;</span>\n          <span class=\"p\">}</span><span class=\"si\">}</span>\n          <span class=\"na\">onInit</span><span class=\"p\">=</span><span class=\"si\">{</span> <span class=\"k\">this</span><span class=\"p\">.</span><span class=\"nx\">handleChange</span><span class=\"p\">.</span><span class=\"nx\">bind</span><span class=\"p\">(</span><span class=\"k\">this</span><span class=\"p\">,</span> <span class=\"dl\">'</span><span class=\"s1\">rangePicker</span><span class=\"dl\">'</span><span class=\"p\">)</span> <span class=\"si\">}</span>\n          <span class=\"na\">onChange</span><span class=\"p\">=</span><span class=\"si\">{</span> <span class=\"k\">this</span><span class=\"p\">.</span><span class=\"nx\">handleChange</span><span class=\"p\">.</span><span class=\"nx\">bind</span><span class=\"p\">(</span><span class=\"k\">this</span><span class=\"p\">,</span> <span class=\"dl\">'</span><span class=\"s1\">rangePicker</span><span class=\"dl\">'</span><span class=\"p\">)</span> <span class=\"si\">}</span>\n        <span class=\"p\">/&gt;</span>\n    <span class=\"p\">&lt;/</span><span class=\"nt\">main</span><span class=\"p\">&gt;</span>\n  <span class=\"p\">)</span>\n<span class=\"p\">}</span>\n</code></pre></div>\n</div>\n<p data-sourcepos=\"41:1-41:45\">この様に簡単に使えます! すごい!</p>\n<h1 data-sourcepos=\"43:1-43:20\" id=\"2-0-0\" name=\"2-0-0\">\n<a class=\"anchor\" id=\"ソースコード\" name=\"%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89\" href=\"#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89\" data-position=\"2-0-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"ソースコード\"> &gt; ソースコード</span></a>ソースコード</h1>\n<p data-sourcepos=\"45:1-45:85\"><a href=\"https://github.com/adphorus/react-date-range/\" target=\"_blank\" rel=\"noopener noreferrer\">github.com/adphorus/react-date-range</a></p>\n<h1 data-sourcepos=\"48:1-48:14\" id=\"3-0-0\" name=\"3-0-0\">\n<a class=\"anchor\" id=\"おわりに\" name=\"%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB\" href=\"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB\" data-position=\"3-0-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"おわりに\"> &gt; おわりに</span></a>おわりに</h1>\n<p data-sourcepos=\"50:1-51:136\">このコンポーネントは、内部の日付処理に、<br>\n<a href=\"http://momentjs.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Moment.js</a>というライブラリを使用しているようです。こちらも参考になりそうですね!</p>\n"}},"pageContext":{"id":"DatoCmsPost-5142976-ja","description":"こんにちは! れおりんです!! 朝と夜は大分肌寒くなってきましたね〜! 今回は、Reactコンポーネントの「react-date-range」を紹介していきます! デモ 以下のようにスタイリッシュな日付範囲選択コンポーネントが作れます。 ↓ 実際に操作できます もっと沢山のデモ このデモのメイン部分 この様に簡単に使えます! すごい! ソースコード github.com/adphorus/react-date-range おわりに このコンポーネントは、内部の日付処理に、 Moment.jsというライブラリを使用しているようです。こちらも参考になりそうですね!","toc":[{"tag":"h1","depth":1,"href":"#%E3%83%87%E3%83%A2","text":"デモ","html":"デモ"},{"tag":"h2","depth":2,"href":"#%E3%81%93%E3%81%AE%E3%83%87%E3%83%A2%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E9%83%A8%E5%88%86","text":"このデモのメイン部分","html":"このデモのメイン部分"},{"tag":"h1","depth":1,"href":"#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89","text":"ソースコード","html":"ソースコード"},{"tag":"h1","depth":1,"href":"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB","text":"おわりに","html":"おわりに"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXhOVFF0TnpNMU9Ea3dMbXB3Wno5dFlYTnJQV1ZzYkdsd2MyVW1abTA5Y0c1bkpuYzlNalUySm1nOU1qVTImYmxlbmQtaD02NCZibGVuZC14PTAmYmxlbmQteT0wJmJsZW5kLW1vZGU9bm9ybWFsJm1hcms2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOc1pXWjBKblI0ZEMxbWIyNTBQWE5oYm5NdGMyVnlhV1lsTWtOaWIyeGtKblI0ZEMxamIyeHZjajB5TWpFNE1UWW1kSGgwTmpROVkyMVdkbU50YkhWYWR5WjBlSFF0YzJsNlpUMHpNQ1pvUFRZMCZtYXJrLXg9NjQmbWFyay1hbGlnbj1taWRkbGUlMkNsZWZ0&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFWYlZab1dUTlVhbWR5VUdwbk4xQnFaelV6YW1jM2VtcG5ORE5xWnpkUWFtYzBhbTUwVEc1cmRUUnphRWxQVXpkcGRWZGliblZQUW5JdFQwRm5aV0ZZY0dWVE4yMVBUMEp5ZFdWMmFFOVhZbk4xYlVKMVQyRkxiblZQUW1wUFQwSndMVTlDYW1WUFEya3RUMEZxU0Vwc1dWZE9NRXhYVW1oa1IxVjBZMjFHZFZveVdHcG5TVEJvSm5SNGRDMXphWHBsUFRVMUpuYzlNVEl3TUNab1BUWXpNQSZibGVuZC1tb2RlPW5vcm1hbA&blend-mode=normal","otherPost":{"type":"author","title":"ScalaでDDD徹底入門講座","slug":"/posts/43"}}}}