【react-native】react-native-calendar-stripで選択中の日付を取る


react-native-calendar-stripは便利
ざっくり説明すると、

な感じで週次のカレンダーを出せるのがreact-native-calendar-stripです!

しかしこのreact-native-calendar-stripはチュートリアルが非常にガサツです。

getSelectedDate() : Returns the currently selected date. If no date is selected, returns undefined.

▼mokabuu.comによる悪意ある和訳
getSelectedDate() : これ使うと選択中の日付とれるべ!なんも選んでないときはundefined返すんでよろぴく☆

https://github.com/BugiDev/react-native-calendar-strip

左様か…。

で、どうやって使うんだ!

今日はそんなreact-native-calendar-stripでの選択中日付のとりかたについて説明します。


こうやってとる

return(
	<View style={styles.container}>
		<CalendarStrip style={styles.cal}
			ref={(c) => this._input = c}
		/>

	</View>
);

render()で返されるviewの中に埋め込んでおいて、日付を取りたいイベントで、

<TouchableOpacity style={styles.item} onPress={
	() => {
		var d = new Date(this._input.getSelectedDate());
	}>
</TouchableOpacity>

よんであげればとれます。


まとめ
これぐらいのサンプルコードどっかに乗っていれば誰でもさくっと使えるのに、どこにも乗ってなかったので記事書いてみました!

いいなと思ったらシェアしていただけると励みになります(react-native日本語記事が少ないので心折れるのですww)


最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。


コメントを残す