ほとんどのプロジェクトでは、ユーザー インターフェイスの時間選択が不可欠です。プロジェクトのユーザー エクスペリエンスを考慮すると、ユーザーに時間の入力を許可しないことが特に重要です。自分自身が重要です。さらに、ユーザーの入力時間によりフォーマットが不安定になるという問題が発生し、バックエンドの開発量が増加します。この際、時刻入力プラグインを使用する必要がありますが、フォーマットを自分で設定することでユーザーの入力工数も軽減され、利便性が向上します。
使用
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: 'zh-CN', //默认选择格式 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 = $('#startTime').datetimepicker(); var picker2 = $("#endTime").datetimepicker(); //动态设置最小值(选择前面一个日期后:后面一个日期不能小于前面一个) picker1.on('changeDate', function (e) { picker2.datetimepicker('setStartDate', e.date); }); //动态设置最大值(选择后面一个日期后:前面一个日期不能大于前面一个) picker2.on('changeDate', function (e) { picker1.datetimepicker('setEndDate', e.date); }); }); </script>
以上がブートストラップフォームで日付を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。