Last active
September 1, 2016 13:13
-
-
Save yn-misaki/5b30740288d19c892e3785a2afdf41e1 to your computer and use it in GitHub Desktop.
React.jsコンポーネントのReact-datetimeライブラリのカーソル問題&解決法 ref: http://qiita.com/yn-misaki/items/0fc943561f2b6b57bc7c
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ npm update react-datetime |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require('react-datetime'); | |
render: function() { | |
return <Datetime />; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// カレンダー全体 | |
<div class="rdtPicker"> | |
<div class="rdtDays"> | |
<table> | |
<thead> | |
<tr> | |
// 前月のボタン「 < 」 | |
<th class="rdtPrev"></th> | |
// M月 YYYY (例: 7月 2016) | |
<th class="rdtSwitch"></th> | |
// 次月のボタン「 > 」 | |
<th class="rdtNext"></th> | |
</tr> | |
<tr> | |
// 曜日(例: 日) | |
<th class="dow"></th> | |
(略) | |
<th class="dow"></th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
// 前月の日付 | |
<td class="rdtDay rdtOld"></td> | |
(略) | |
// 当月の日付 | |
<td class="rdtDay"></td> | |
</tr> | |
<tr></tr> | |
(略) | |
<tr></tr> | |
<tr> | |
// 当月の日付 | |
<td class="rdtDay"></td> | |
(略) | |
// 未来の日付 | |
<td class="rdtDay rdtNew rdtDisabled"></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ npm install react-datetime |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.rdtDay { | |
cursor: pointer; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi I see that you use React, so I am sure that you will find interesting the https://reactjs.co - this is the free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.