Méthode de réglage de la plage horaire TP5.1 + layui

J'ai récemment rencontré un problème lors de la réalisation d'un projet, c'est-à-dire que l'heure de début et l'heure de fin sont liées. La plage de sélection de l'heure de fin est l'heure de début minimale et l'heure maximale de 90 jours après l'heure de début. ici. La date obtenue par le plug-in a deux paramètres, min et max, qui peuvent respectivement définir la plage de dates

Le code est le suivant :

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //限定可选日期
  var ins22 = laydate.render({
    elem: '#test-limit1'
    ,min: '2016-10-14'
    ,max: '2080-10-14'
  });
});

Mais quand il s'agit d'obtenir les valeurs de max ; et min, j'ai rencontré des difficultés, et après avoir étudié la documentation officielle de Layui et essayé plusieurs fois, j'ai finalement résolu ce problème et je l'ai partagé avec vous :

a Définissez les variables heure actuelle, durée minimale et durée maximale
.

var now = new Date();
       var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
       var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);

b. Réinitialisez-les en fonction de l'affectation de temps max et min actuellement sélectionnée

Pour obtenir les valeurs de max et min, vous devez comprenez d'abord l'unité de conversion de temps. L'idée générale est que l'unité de conversion de base est l'heure, et 1 heure équivaut à 3600 secondes. Parce que l'horodatage en laui est calculé en millisecondes, il doit être multiplié par 1000 sur la base de 3600. Un. le jour est de 24 heures, et un total de 90 jours est 90*24*3600*1000</ code>.<code>max和min的值，首先要了解时间换算单位，大概思路为基本换算单位以小时为准，1小时为3600秒，因为laui中的时间戳是以毫秒为计算单位，所以需要再3600的基础上再乘以1000，一天为24小时，总共90天所以是90*24*3600*1000.

在选择了开始时间后done: function (value, date) 中value的值为当前选择的时间，将该值转化为时间戳为：var date1 = new Date(value).getTime();

90天后的时间戳为：var date2 = date1 + 90 * 24 * 3600 * 1000;

Après avoir sélectionné l'heure de début, la valeur de la valeur dans done: fonction (valeur, date ) est l'heure actuellement sélectionnée. Convertissez cette valeur en horodatage : var date1 = new Date(value).getTime();

L'horodatage 90 jours plus tard est : var date2 = date1 + 90 * 24 * 3600 * 1000;

Ensuite, récupérez l'heure de conversion en année, mois et jour :

var date5 = {
                   'date': date3.getDate(),
                   'month': date3.getMonth() + 1,
                   'year': date3.getFullYear()
               };

Attribuez les valeurs obtenues aux valeurs minimales et maximales du heure de fin :

end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;

Le code complet est donc :

var start = laydate.render({
           elem: '#bx_start',
           type: 'date',
           max: max,
           min: min,
           showBottom: false,
           btns: ['clear', 'confirm'],
           done: function (value, date) {
               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间
               var date3 = new Date(date2);
               var date5 = {
                   'date': date3.getDate(),
                   'month': date3.getMonth() + 1,
                   'year': date3.getFullYear()
               };
               end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;
           }
       });

c. Passez le min et le max obtenus jusqu'à l'heure de fin

var end = laydate.render({
           elem: '#bx_end',
           type: 'date',
           max: max,
           min: min,
           showBottom: false,
           done: function (value, date) {
               if ($.trim(value) == '') {
                   var curDate = new Date();
                   date = {
                       'date': curDate.getDate(),
                       'month': curDate.getMonth() + 1,
                       'year': curDate.getFullYear()
                   };
               }
               start.config.max = date;
               start.config.max.month = date.month - 1;
           }
       });

Ce qui suit est le code complet

<script>
   layui.use([&#39;form&#39;,&#39;layedit&#39;, &#39;laydate&#39;,&#39;layer&#39;,&#39;element&#39;], function() {
       $ = layui.jquery;
       layer = layui.layer;
       var form = layui.form;
       layedit = layui.layedit;
       laydate = layui.laydate;
//定义变量当前时间、最小时间、最大时间
       var now = new Date();
       var min = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 1) + &quot;-&quot; + (now.getDate() + 1);
       var max = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 2) + &quot;-&quot; + (now.getDate() + 2);
       var start = laydate.render({
           elem: &#39;#bx_start&#39;,
           type: &#39;date&#39;,
           max: max,
           min: min,
           showBottom: false,
           btns: [&#39;clear&#39;, &#39;confirm&#39;],
           done: function (value, date) {
               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的
               var date3 = new Date(date2);

               var date5 = {
                   &amp;#39;date&amp;#39;: date3.getDate(),
                   &amp;#39;month&amp;#39;: date3.getMonth() + 1,
                   &amp;#39;year&amp;#39;: date3.getFullYear()
               };
               end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;
           }
       });
       var end = laydate.render({
           elem: &amp;#39;#bx_end&amp;#39;,
           type: &amp;#39;date&amp;#39;,
           max: max,
           min: min,
           showBottom: false,
           done: function (value, date) {
               if ($.trim(value) == &amp;#39;&amp;#39;) {
                   var curDate = new Date();
                   date = {
                       &amp;#39;date&amp;#39;: curDate.getDate(),
                       &amp;#39;month&amp;#39;: curDate.getMonth() + 1,
                       &amp;#39;year&amp;#39;: curDate.getFullYear()
                   };
               }
               start.config.max = date;
               start.config.max.month = date.month - 1;
           }
       });
   });
</script>

Articles connexes recommandés : " TP5.1 Ajouter une fonction de filigrane aux images" "TP5.1+layui pour réaliser l'appel du nombre de colonnes" "Les 10 derniers tutoriels vidéo thinkphp🎜》🎜🎜

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!