カレンダーフォームの実装(1)

Webflow
Embed
lowコード
システム連携
Web
フォーム

WebflowにFlatpickrのライブラリを導入することでフォームにカレンダーを使って日付を入力できる実装方法を説明します。

チュートリアルで使用されるライブラリーのコードはこちらです:

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css>">
<script src="<https://cdn.jsdelivr.net/npm/flatpickr>"></script>
<script src="<https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js>"></script>
<script>var Webflow = Webflow || [];
Webflow.push(function () {
document.getElementsByClassName('date').flatpickr({
  'locale': 'ja',
   // If you want to show the date to the end-user one way, but
   // need to send it to some third-party with different formatting,
   // altInput and altFormat are your best friends. They allow
// you to do exactly that.
 });
});
</script>

関連チュートリアル