So wählen Sie ein Datum im Bootstrap-Formular aus

In den meisten Projekten ist die Auswahl der Zeit auf der Benutzeroberfläche von entscheidender Bedeutung. Unter der Prämisse der Benutzerfreundlichkeit des Projekts ist es besonders wichtig, den Benutzern nicht die Möglichkeit zu geben, die Zeit selbst einzugeben. Darüber hinaus kommt es zu Problemen mit der Benutzereingabezeit in einem instabilen Format, was den Aufwand für die Backend-Entwicklung erhöht. Zu diesem Zeitpunkt müssen wir das Zeiteingabe-Plug-In verwenden. Das Format wird von uns selbst festgelegt, was auch den Eingabeprozess des Benutzers reduziert und die Benutzerfreundlichkeit verbessert.

Verwenden Sie

das Zeit-Plug-in datetimepicker von bootStrap, unterstützt die Diversifizierung der Benutzeroberfläche und verfügt über eine spezielle URL zur Veranschaulichung dieser Zeitauswahl.

Demo

Verwenden Sie die Methoden und die Zeit, die das Plug-in bietet. Sie können eine einfache Demo erstellen

Demo-Funktionspunkte:

1 Geben Sie das Datumsformat als jjjj-MM-tt hh:ii:ss ein (das Format kann sein individuell angepasst).

2. Nachdem die Uhrzeit des vorherigen Datums eingegeben wurde, darf der Eingabewert des folgenden Datums nicht kleiner sein als der des vorherigen Datums.

３ Nach Eingabe der Uhrzeit des späteren Datums darf der Eingabewert des vorherigen Datums nicht größer sein als der des vorherigen Datums.

Verwandte Empfehlungen: „Bootstrap Erste Schritte Tutorial“

Benötigen Sie Bootstrap, um gekapseltes CSS und JS bereitzustellen

<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>

Das obige ist der detaillierte Inhalt vonSo wählen Sie ein Datum im Bootstrap-Formular aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!