PHP日程计划管理功能之设置页面（2）

在上一篇笔记《PHP日程计划管理功能之日期计算器（1）》中波波记录了日程计划中核心的日期计算方法，本篇笔记记录日程计划设置的HTML页面。

由于本源码是结合PHP数据渲染编写的，故而在源代码中可能包含一部分PHP表示的变量，包括一些下拉框也是采用PHP输出的。分享本源码的意义仅供参考。以及layui如何实现点击单选框显示不同的表单。

  1. {block name="content"}
  2. <form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px;height: 500px'>
  3.     <div class="layui-form-item">
  4.         <label class="layui-form-label">计划类型</label>
  5.         <div class="layui-input-block">
  6.             <input type="radio" name="type" value="year" title="年" {if isset($sched.type) and $sched.type eq 'year'}checked{/if} lay-filter="ttype">
  7.             <input type="radio" name="type" value="month" title="月" {if isset($sched.type) and $sched.type eq 'month'}checked{/if} lay-filter="ttype">
  8.             <input type="radio" name="type" value="week" title="周" {if isset($sched.type) and $sched.type eq 'week'}checked{/if} lay-filter="ttype">
  9.             <input type="radio" name="type" value="day" title="日" {if isset($sched.type) and $sched.type eq 'day'}checked{/if} lay-filter="ttype">
  10.             <input type="radio" name="type" value="hour" title="运行时长" {if isset($sched.type) and $sched.type eq 'hour'}checked{/if} lay-filter="ttype">
  11.         </div>
  12.     </div>
  13.     <!--分割线-->
  14.     <div class="hr-line-dashed"></div>
  15.     <div class="form-group" data-storage-type="year">
  16.         <div class="layui-form-item">
  17.             <div class="layui-input-block">
  18.                 <input type="radio" name="cycle_type" value="week" title="按周" {if isset($sched.cycle_type) and $sched.cycle_type eq 'week'}checked{/if} lay-filter="cycle_type">
  19.                 <input type="radio" name="cycle_type" value="month" title="按月" {if isset($sched.cycle_type) and $sched.cycle_type eq 'month'}checked{/if} lay-filter="cycle_type" >
  20.             </div>
  21.         </div>
  22.     </div>
  24.     <div class="form-group" data-storage-type="year-week" lay-filter="year-week">
  25.         <div class="layui-form-item">
  26.             <label class="layui-form-label">每隔</label>
  27.             <div class='layui-input-inline'>
  28.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  29.             </div>
  30.             <div class="layui-form-mid">年重复，</div>
  31.         </div>
  32.         <div class="layui-form-item">
  33.             <label class="layui-form-label">在</label>
  34.             <div class="layui-input-inline">
  35.                 <select name="month" style="width: 30%" required="required" lay-filter="selc_month">
  36.                     <option value="0">请选择</option>
  37.                     <option value="1" {if isset($sched.month) and $sched.month eq 1}selected{/if}>一月</option>
  38.                     <option value="2" {if isset($sched.month) and $sched.month eq 1}selected{/if}>二月</option>
  39.                     <option value="3" {if isset($sched.month) and $sched.month eq 1}selected{/if}>三月</option>
  40.                     <option value="4" {if isset($sched.month) and $sched.month eq 1}selected{/if}>四月</option>
  41.                     <option value="5" {if isset($sched.month) and $sched.month eq 1}selected{/if}>五月</option>
  42.                     <option value="6" {if isset($sched.month) and $sched.month eq 1}selected{/if}>六月</option>
  43.                     <option value="7" {if isset($sched.month) and $sched.month eq 1}selected{/if}>七月</option>
  44.                     <option value="8" {if isset($sched.month) and $sched.month eq 1}selected{/if}>八月</option>
  45.                     <option value="9" {if isset($sched.month) and $sched.month eq 1}selected{/if}>九月</option>
  46.                     <option value="10" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十月</option>
  47.                     <option value="11" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十一月</option>
  48.                     <option value="12" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十二月</option>
  49.                 </select>
  50.             </div>
  51.             <div class="layui-input-inline">
  52.                 <select name="week" style="width: 30%" required="required" lay-filter="selc_week">
  53.                     <option value="0">请选择</option>
  54.                     <option value="1" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第一周</option>
  55.                     <option value="2" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第二周</option>
  56.                     <option value="3" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第三周</option>
  57.                     <option value="4" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第四周</option>
  58.                 </select>
  59.             </div>
  60.             <div class="layui-input-inline">
  61.                 <select name="weekday" style="width: 30%" required="required" lay-filter="selc_weekday">
  62.                     <option value="0">请选择</option>
  63.                     <option value="monday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期一</option>
  64.                     <option value="tuesday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期二</option>
  65.                     <option value="wednesday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期三</option>
  66.                     <option value="thursday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期四</option>
  67.                     <option value="friday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期五</option>
  68.                     <option value="saturday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期六</option>
  69.                     <option value="sunday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期日</option>
  70.                 </select>
  71.             </div>
  72.         </div>
  73.         <div class="layui-form-item">
  74.             <label class="layui-form-label">开始时间</label>
  75.             <div class="layui-input-inline">
  76.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  77.             </div>
  78.         </div>
  79.     </div>
  81.     <div class="form-group" data-storage-type="year-month" lay-filter="year-month">
  82.         <div class="layui-form-item">
  83.             <label class="layui-form-label">每隔</label>
  84.             <div class='layui-input-inline'>
  85.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  86.             </div>
  87.             <div class="layui-form-mid">年重复，</div>
  88.         </div>
  89.         <div class="layui-form-item">
  90.             <label class="layui-form-label">在</label>
  91.             <div class="layui-input-inline">
  92.                 <select name="month" style="width: 30%" required="required" lay-filter="selc_month">
  93.                     <option value="0">请选择</option>
  94.                     <option value="1" {if isset($sched.month) and $sched.month eq 1}selected{/if}>一月</option>
  95.                     <option value="2" {if isset($sched.month) and $sched.month eq 1}selected{/if}>二月</option>
  96.                     <option value="3" {if isset($sched.month) and $sched.month eq 1}selected{/if}>三月</option>
  97.                     <option value="4" {if isset($sched.month) and $sched.month eq 1}selected{/if}>四月</option>
  98.                     <option value="5" {if isset($sched.month) and $sched.month eq 1}selected{/if}>五月</option>
  99.                     <option value="6" {if isset($sched.month) and $sched.month eq 1}selected{/if}>六月</option>
  100.                     <option value="7" {if isset($sched.month) and $sched.month eq 1}selected{/if}>七月</option>
  101.                     <option value="8" {if isset($sched.month) and $sched.month eq 1}selected{/if}>八月</option>
  102.                     <option value="9" {if isset($sched.month) and $sched.month eq 1}selected{/if}>九月</option>
  103.                     <option value="10" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十月</option>
  104.                     <option value="11" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十一月</option>
  105.                     <option value="12" {if isset($sched.month) and $sched.month eq 1}selected{/if}>十二月</option>
  106.                 </select>
  107.             </div>
  108.             <div class="layui-form-mid">第</div>
  109.             <div class="layui-input-inline">
  110.                 <select name="day" style="width: 15%" lay-filter="selc" required>
  111.                     {if isset($sched.day)}{:dayOptions($sched.day)}{else /}{:dayOptions()}{/if}
  112.                 </select>
  113.             </div>
  114.             <div class="layui-form-mid">天，</div>
  115.             <label class="layui-form-mid">开始时间</label>
  116.             <div class="layui-input-inline">
  117.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  118.             </div>
  119.         </div>
  120.     </div>
  122.     <div class="form-group" data-storage-type="month">
  123.         <div class="layui-form-item">
  124.             <div class="layui-input-block">
  125.                 <input type="radio" name="cycle_type" value="week" title="按周" {if isset($sched.cycle_type) and $sched.cycle_type eq 'week'}checked{/if} lay-filter="cycle_type">
  126.                 <input type="radio" name="cycle_type" value="day" title="按天" {if isset($sched.cycle_type) and $sched.cycle_type eq 'day'}checked{/if} lay-filter="cycle_type">
  127.             </div>
  128.         </div>
  129.     </div>
  131.     <div class="form-group" data-storage-type="month-week" lay-filter="month-week" style="margin-left: 40px">
  132.         <div class="layui-form-item">
  133.             <label class="layui-form-label">每隔</label>
  134.             <div class='layui-input-inline'>
  135.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  136.             </div>
  137.             <div class="layui-form-mid text-explode">月重复，</div>
  138.         </div>
  139.         <div class="layui-form-item">
  140.             <label class="layui-form-label">在</label>
  141.             <div class="layui-input-inline">
  142.                 <select name="week" style="width: 30%" lay-filter="selc_week">
  143.                     <option value="0">请选择</option>
  144.                     <option value="1" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第一周</option>
  145.                     <option value="2" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第二周</option>
  146.                     <option value="3" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第三周</option>
  147.                     <option value="4" {if isset($sched.month) and $sched.month eq 1}selected{/if}>第四周</option>
  148.                 </select>
  149.             </div>
  150.             <div class="layui-input-inline">
  151.                 <select name="weekday" style="width: 30%" lay-filter="selc_weekday">
  152.                     <option value="0">请选择</option>
  153.                     <option value="monday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期一</option>
  154.                     <option value="tuesday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期二</option>
  155.                     <option value="wednesday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期三</option>
  156.                     <option value="thursday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期四</option>
  157.                     <option value="friday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期五</option>
  158.                     <option value="saturday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期六</option>
  159.                     <option value="sunday" {if isset($sched.month) and $sched.month eq 1}selected{/if}>星期日</option>
  160.                 </select>
  161.             </div>
  162.             <label class="layui-form-label">开始时间</label>
  163.             <div class="layui-input-inline">
  164.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  165.             </div>
  166.         </div>
  167.     </div>
  169.     <div class="form-group" data-storage-type="month-day" lay-filter="month-day" style="margin-left: 40px">
  171.         <div class="layui-form-item">
  172.             <label class="layui-form-label">每隔</label>
  173.             <div class='layui-input-inline'>
  174.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  175.             </div>
  176.             <div class="layui-form-mid">月重复，</div>
  177.        </div>
  178.         <div class="layui-form-item">
  179.             <label class="layui-form-label">在第</label>
  180.             <div class="layui-input-inline">
  181.                 <select name="day" lay-filter="selc">
  182.                     {if isset($sched.day)}{:dayOptions($sched.day)}{else /}{:dayOptions()}{/if}
  183.                 </select>
  184.             </div>
  185.             <div class="layui-form-mid">天，</div>
  186.             <label class="layui-form-label">开始时间</label>
  187.             <div class="layui-input-inline">
  188.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  189.             </div>
  190.         </div>
  191.     </div>
  193.     <div class="form-group" data-storage-type="day">
  194.         <div class="layui-form-item">
  195.             <label class="col-sm-2 control-label">每隔</label>
  196.             <div class='layui-input-inline'>
  197.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  198.             </div>
  199.             <div class="layui-form-mid text-explode">天重复，开始时间</div>
  200.             <div class="layui-input-inline">
  201.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  202.             </div>
  203.         </div>
  204.     </div>
  206.     <div class="form-group" data-storage-type="week">
  207.         <div class="layui-form-item">
  208.             <label class="col-sm-2 control-label">每隔</label>
  209.             <div class='layui-input-inline'>
  210.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  211.             </div>
  212.             <div class="layui-form-mid text-explode">周重复，开始时间</div>
  213.             <div class="layui-input-inline">
  214.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  215.             </div>
  216.         </div>
  217.         <div class="layui-form-item">
  218.             <label class="col-sm-2 control-label" required="required">选择星期：</label>
  219.                 <div class="layui-input-block">
  220.                     <input type="checkbox" name="cweek[monday]" lay-skin="primary" title="星期一" {if isset($sched.week.monday) and $sched.week.monday eq 1}checked{/if}>
  221.                     <input type="checkbox" name="cweek[tuesday]" lay-skin="primary" title="星期二" {if isset($sched.week.tuesday) and $sched.week.tuesday eq 1}checked{/if}>
  222.                     <input type="checkbox" name="cweek[wednesday]" lay-skin="primary" title="星期三" {if isset($sched.week.wednesday) and $sched.week.wednesday eq 1}checked{/if}>
  223.                     <input type="checkbox" name="cweek[thursday]" lay-skin="primary" title="星期四" {if isset($sched.week.thursday) and $sched.week.thursday eq 1}checked{/if}>
  224.                     <input type="checkbox" name="cweek[friday]" lay-skin="primary" title="星期五" {if isset($sched.week.friday) and $sched.week.friday eq 1}checked{/if}>
  225.                     <input type="checkbox" name="cweek[saturday]" lay-skin="primary" title="星期六" {if isset($sched.week.saturday) and $sched.week.saturday eq 1}checked{/if}>
  226.                     <input type="checkbox" name="cweek[sunday]" lay-skin="primary" title="星期日" {if isset($sched.week.sunday) and $sched.week.sunday eq 1}checked{/if}>
  227.                 </div>
  228.         </div>
  230.     </div>
  232.     <div class="form-group" data-storage-type="hour">
  233.         <div class="layui-form-item">
  234.             <label class="col-sm-2 control-label">每隔</label>
  235.             <div class='layui-input-inline'>
  236.                 <input name="gap" required="required" value="{$sched.gap|default='1'}" class="layui-input" autocomplete="off">
  237.             </div>
  238.             <div class="layui-form-mid text-explode">小时重复，开始时间</div>
  239.             <div class="layui-input-inline">
  240.                 <input name="begin_time" required="begin_time" value="{$sched.begin_time|default='00:00'}" class="layui-input">
  241.             </div>
  242.         </div>
  243.     </div>
  245.     <div class="layui-form-item">
  246.         <label class="layui-form-label">开始日期</label>
  247.         <div class="layui-input-inline">
  248.             <input name="start_time" id="start_time" value="{$vo.start_time|default=''}" required="required" title="请设置开始时间" class="layui-input">
  249.         </div>
  250.         <label class="layui-form-label">结束时间</label>
  251.         <div class="layui-input-inline">
  252.             <input name="finish_time" id="finish_time" value="{$vo.finish_time|default=''}" required="required" title="请设置结束时间" class="layui-input">
  253.         </div>
  254.     </div>
  256.     <div class="hr-line-dashed"></div>
  258.     <div class="col-sm-4 col-sm-offset-2">
  259.         <div class="layui-form-item text-center">
  260.             {if isset($id)}<input type='hidden' value='{$id}' name='id'/>{/if}
  261.             <button class="layui-btn" type="submit">保存计划</button>
  262.             <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消日程设置吗？" data-close>取消日程</button>
  263.         </div>
  264.     </div>
  266. </form>
  267. {/block}
  269. {block name="script"}
  270. <script>
  271.     window.form.render();
  272.     //表单初始化
  273.     var type_value = "{$sched.type|default='day'}";
  274.     var elem_hide = $("[data-storage-type='" + type_value + "']");
  275.     $("[data-storage-type]").not(elem_hide.show()).hide();
  276.     //解决input内容改变值不变BUG
  277.     $("input[name=gap]").change(function(e){
  278.         $("input[name=gap]").val(e.delegateTarget.value);
  279.     })
  280.     layui.use(['form','jquery','laydate'],function (){
  281.         var form = layui.form,$=layui.jquery,laydate=layui.laydate;
  282.         //点击type单选框切换表单
  283.         form.on('radio(ttype)',function (data){
  284.             var $tips = $("[data-storage-type='" + data.value + "']");
  285.             $("[data-storage-type]").not($tips.show()).hide();
  286.             form.render();
  287.         })
  288.         form.on('radio(cycle_type)',function (data){
  289.             var ttpye = $('[name=type]:checked').val();
  290.             var $tips = $("[data-storage-type='" + ttpye +"-" + data.value + "']");
  291.             $("[data-storage-type]").not($tips.show()).hide();
  292.             $("[data-storage-type='"+ttpye+"']").show();
  293.             form.render();
  294.         })
  295.         form.on('select(selc)',function (data){
  296.             $("select[name=day]").val(data.value);
  297.         })
  298.         form.on('select(selc_month)',function (data){
  299.             $("select[name=month]").val(data.value);
  300.         })
  301.         form.on('select(selc_week)',function (data){
  302.             $("select[name=week]").val(data.value);
  303.         })
  304.         form.on('select(selc_weekday)',function (data){
  305.             $("select[name=weekday]").val(data.value);
  306.         })
  307.         //阻止多个日期点击冒泡事件
  308.         $("#start_time").on("click",function(){
  309.             laydate.render({
  310.                 elem:'#start_time',format:'yyyy-MM-dd',closeStop:'#start_time',value:this.value
  311.             })
  312.         })
  313.         $("#finish_time").on("click",function(){
  314.             laydate.render({
  315.                 elem:'#finish_time',format:'yyyy-MM-dd',closeStop:'#finish_time',value:this.value
  316.             })
  317.         })
  318.         //阻止laydate冒泡事件
  319.         $("input[name='begin_time']").on('click',function (){
  320.             laydate.render({
  321.                 elem:this,
  322.                 type:'time',
  323.                 format:'HH:mm',
  324.                 value:this.value,
  325.                 change:function (value){
  326.                     $("input[name='begin_time']").val(value);
  327.                 }
  328.             });
  329.         })
  331.     })
  333. </script>
  334. {/block}

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！