Bootstrapを使用したHTMLフォームにDatePickerを追加する方法

2024-02-14 13:31 Bootstrap HTML Datepicker

方法1: Bootstrap Datepickerプラグインを使用する

  1. Bootstrapの公式ウェブサイトからBootstrap Datepickerプラグインをダウンロードします。
  2. ダウンロードしたファイルをプロジェクトのフォルダに配置します。
  3. HTMLファイルのセクション内で、ダウンロードしたファイルを読み込みます。
<head>
  <link rel="stylesheet" href="path/to/bootstrap-datepicker.css">
  <script src="path/to/bootstrap-datepicker.js"></script>
</head>
  1. フォームの日付入力フィールドにDatePickerを適用します。
<input type="text" class="datepicker">
  1. JavaScriptでDatePickerを初期化します。
<script>
  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
</script>

方法2: Bootstrapの日付選択機能を使用する

  1. Bootstrapには、日付選択機能を提供する組み込みのクラスがあります。
<input type="date" class="form-control">

方法3: JavaScriptのライブラリを使用する

  1. Bootstrap以外のJavaScriptのライブラリを使用することもできます。例えば、jQuery UIのDatePickerを使用する方法です。
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
  1. フォームの日付入力フィールドにDatePickerを適用します。
<input type="text" class="datepicker">
  1. JavaScriptでDatePickerを初期化します。
<script>
  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
</script>

これらの方法を使用して、Bootstrapを使用したHTMLフォームにDatePickerを追加することができます。選択した方法に基づいて、必要なコードを追加してください。