２０２３年に、同じタイトルの記事を書いたのですが、再度必要となったので復習してみます。
JavaScriptには標準で日付を扱うものはあるのですが、少し癖があります。
年取得は、getFullYear()だとか、、、
月取得において、Monthは１足さないといけないだとか、、、
日取得は、getDate()で、曜日取得は、getDay()だとか、、、
Day.jsを試してみた。これは、以前のMoment.jsの後継に当たる？ようであり、API仕様が似ているとのこと。
これだと、importでなく、少し特殊な呼び出し方(あとから考えると、expo-sqliteの呼び出し方と同様で特殊ではないようである)だが、React.jsでも使えます。
なお、React Nativeでも使用できますが、この書き方ではエラーがでました。
import dayjs from "dayjs";
と普通に書くとできました。
ここではReact Native(Expo)で使用してみます。
まずは、今日の日付を、標準のライブラリでやってみて、そのあとにDay.jsライブラリでやってみます。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const todayDate = new Date();
const yearText = todayDate.getFullYear();
const monthText = todayDate.getMonth() + 1;
const dateText = todayDate.getDate();
myDate = yearText + "年" + monthText + "月" + dateText + "日";
return (
<View style={styles.container}>
<Text>今日の日付</Text>
<Text>{myDate}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
ちなみに、今、Visual Studioに Amazon Qを入れているが、無料なのにすごいです。やりたいことが次々出てくる。
Day.jsを使用してみます。Javaを使っていた人は共通しているところが多いのでなじみやすいと思います。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import dayjs from "dayjs";
export default function App() {
const now = dayjs(new Date());
return (
<View style={styles.container}>
<Text>今日の日付</Text>
<Text>{now.format("YYYY/MM/DD")}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
次は、SQliteに日付を入れたい場合どうするかについて考えてみたいと思います。
