Comment sélectionner la date sous forme de bootstrap

Dans la plupart des projets, la sélection de l'heure de l'interface utilisateur est essentielle. Dans le souci de convivialité de l'expérience utilisateur du projet, il est particulièrement important de ne pas permettre aux utilisateurs de saisir eux-mêmes l'heure. . important. De plus, le temps de saisie de l'utilisateur posera le problème du format instable, ce qui augmentera la quantité de développement back-end. À l'heure actuelle, nous devons utiliser le plug-in de saisie de l'heure. Le format est défini par nous-mêmes, ce qui réduit également le processus de saisie de l'utilisateur et améliore la convivialité.

Utilisez

le plug-in temporel de bootStrap, datetimepicker, prend en charge la diversification de l'interface et dispose d'une URL dédiée pour illustrer ce sélecteur de temps.

Démo

Utilisez les méthodes et le temps fournis par le plug-in. Vous pouvez faire une simple démo

Points de fonction de démonstration :

1 Entrez le format de date au format aaaa-MM-jj hh:ii:ss (le format peut être. personnalisé) .

2. Une fois l'heure de la date précédente saisie, la valeur d'entrée de la date suivante ne peut pas être inférieure à la date précédente.

３. Une fois l'heure de la date la plus récente saisie, la valeur d'entrée de la date précédente ne peut pas être supérieure à la date précédente.

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Besoin de bootstrap pour fournir des CSS et des JS encapsulés

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!