Skip to content

Instantly share code, notes, and snippets.

@yn-misaki
Last active September 1, 2016 13:13
Show Gist options
  • Save yn-misaki/5b30740288d19c892e3785a2afdf41e1 to your computer and use it in GitHub Desktop.
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
$ npm update react-datetime
require('react-datetime');
render: function() {
return <Datetime />;
}
// カレンダー全体
<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>
$ npm install react-datetime
.rdtDay {
cursor: pointer;
}
@przeor
Copy link

przeor commented Sep 1, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment