基于layui实现月份选择控件

最新推荐文章于 2024-04-22 11:50:23 发布

旋宝宝要开心

最新推荐文章于 2024-04-22 11:50:23 发布

阅读量3.3k

点赞数

分类专栏： layui 文章标签： layui date

本文链接：https://blog.youkuaiyun.com/qq_39280563/article/details/119454330

版权

本文介绍了如何利用layui框架实现一个月份选择控件。通过设置type为'month'和format为'M'，确保选择的月份以单个数字形式返回，且不自动补前导0，同时解决了10月到12月的显示问题。最后通过CSS隐藏年份显示部分，完成定制化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：

先上html代码：

 <div >
     <div >月份</div>
     <div >
          <input type="text" class="layui-input" id="month_date" readonly/>
     </div>
</div>

然后是js渲染部分，重点在于 type: 'month'和format: "M"两个参数，这样选择的月份返回结果只有一个数字，前面不会补0（10月11月12月也能正常返回）。

MM	月份，至少两位数。如果不足两位，则前面补零。

// 引入js之类的就省略掉啦
const laydate = layui.laydate;
laydate.render({
                    elem: '#month_date',
                    type: 'month',
                    lang: 'ch',
                    trigger: "click",
                    btn