原生input实现时间选择器用法

2024.10.08今天我学习了如何用原生的input，实现时间选择器用法，效果如下：

代码如下：

<div>
  <input id="yf_start" type="text">
</div>

<script>
        $('#yf_start').datepicker({
            language: 'zh-CN', //显示中文
            format: 'yyyy-mm', //显示格式
            autoclose: true, //加上这个参数
            startDate: '2019-01',
            orientation: 'bottom',
            // endDate: '<?php echo date('Y-m'); ?>'
            endDate: '<?php echo date('Y-m', strtotime('-1 months')); ?>'
        });
</script>

我们可以通过修改endDate来限制时间选择的最大值，

如：

1.获取当前月份最后一天：

<?php echo date('Y-m-d', strtotime('last day of this month')); ?>

2.获取下一月的第一天：

<?php echo date('Y-m-01', strtotime('first day of next month')); ?>

3.获取上个月的第一条：

<?php echo date('Y-m-01', strtotime('first day of last month')); ?>

4.获取三个月前的第一天：

<?php echo date('Y-m-01', strtotime('first day of -3 months')); ?>

记得修改对应的类型 日期为'y-m-d' 月份为'y-m' 年份为'y'。

注：原生的没有moment好用，需要可以Moment.js 中文网