日期与时间选择

Posted 2022-06-18 加油，少年！

大家在很多时候都会用到日期与时间的选择，头痛的就是怎么自己去选择时间呢？？ 而不是死脑筋的去输入，这样的方法肯定行不通的，所以说写代码都要灵活应变。 下面我就会为大家讲解一下自己归纳的简单方便的方法去写。

首先呢，我们代码一定要编入layui.js插件这样在javascript里面写代码才有作用！

根据项目中的路径去代入其中。

1.常规方法-日期选择

这是一张图片 ，表明可以实现效果。可以按照自己意愿去选择时间日期！

这是页面布局代码

div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">时间日期选择</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
      </div>
    </div>
    
  </div>
</div>

 这是JavaScript代码

layui.use('laydate', function()
  var laydate = layui.laydate;
  
  //常规用法
  laydate.render(
    elem: '#test1'
  );
 );

其他选择器

年选择器

 这就是年选择器的图片咯！

html代码

<div class="layui-inline">
      <label class="layui-form-label">年范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test7" placeholder=" - ">
      </div>
    </div>

javaScript代码

  //年选择器
  laydate.render(
    elem: '#test2'
    ,type: 'year'
  );
  

范围选择器

这是效果图

 

html代码

 
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-inline" id="test6">
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
  </div>
</div>

javaScript代码

//日期时间范围
  laydate.render(
    elem: '#test10'
    ,type: 'datetime'
    ,range: true
  );

这些就是我部分写的代码  其实还有很多，没有去归纳它，信息量膨大，自行去搜索：layDate日期和时间选择器。