ブートストラップフォームで日付を選択する方法

ほとんどのプロジェクトでは、ユーザー インターフェイスの時間選択が不可欠です。プロジェクトのユーザー エクスペリエンスを考慮すると、ユーザーに時間の入力を許可しないことが特に重要です。自分自身が重要です。さらに、ユーザーの入力時間によりフォーマットが不安定になるという問題が発生し、バックエンドの開発量が増加します。この際、時刻入力プラグインを使用する必要がありますが、フォーマットを自分で設定することでユーザーの入力工数も軽減され、利便性が向上します。

使用

bootStrap の時間プラグイン datetimepicker はインターフェースの多様化をサポートしており、この時間ピッカーを説明するための専用 URL があります。

デモ

プラグインによって提供されるメソッドと時間を使用します。簡単なデモを作成できます

デモ関数ポイント:

1. 日付形式を yyyy-MM-dd hh:ii:ss として入力します (形式は次のとおりです)カスタマイズされた）。

2. 前の日付の時刻を入力した後、次の日付の入力値を前の日付より小さくすることはできません。

3. 後の日付の時刻を入力した後は、前の日付の入力値を前の日付より大きくすることはできません。

関連する推奨事項: 「bootstrap 入門チュートリアル 」

カプセル化された css と js を提供するにはブートストラップが必要です

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
<script src="bootstrap-datetimepicker.js"></script>
<script src="bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $.fn.datetimepicker.defaults = {
  //默认语言
  language: &#39;zh-CN&#39;,
  //默认选择格式
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true,
  todayBtn: true,
  //选择板所在输入框位置
  pickerPosition: "bottom-left"
 };
</script>
 <div class="input-append date form_datetime">
 <input size="16" type="text" value="" id="startTime" readonly>
 <input size="16" type="text" value="" id="endTime" readonly>
</div>
<script>
 $(function () {
  var picker1 = $(&#39;#startTime&#39;).datetimepicker();
  var picker2 = $("#endTime").datetimepicker();
  //动态设置最小值(选择前面一个日期后：后面一个日期不能小于前面一个)
  picker1.on(&#39;changeDate&#39;, function (e) {
   picker2.datetimepicker(&#39;setStartDate&#39;, e.date);
  });
  //动态设置最大值(选择后面一个日期后：前面一个日期不能大于前面一个）
  picker2.on(&#39;changeDate&#39;, function (e) {
   picker1.datetimepicker(&#39;setEndDate&#39;, e.date);
  });
 });
</script>

以上がブートストラップフォームで日付を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。