美文网首页
PC端比较好用的日期选择器

PC端比较好用的日期选择器

作者: 回不去的那些时光 | 来源:发表于2017-11-23 23:57 被阅读57次

今天在做东西的时候需要用到日期选择器,就去网上查阅了一些资料,发现了两个比较好用的日期选择器就整理了下来。

1、bootstrap-datepicker

 <link rel="stylesheet" href="./plugs/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="./plugs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

<input class="date" type="text">

<script src="plugs/jquery/dist/jquery.min.js"></script>
<script src="plugs/bootstrap/js/bootstrap.min.js"></script>
<script src="plugs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function () {
        $('.date').datepicker({
            autoclose: true,//选中之后自动隐藏日期选择框
            format: "yyyy-mm-dd"//日期格式
        });
        $(".date").datepicker("setDate", nowDate());//设置默认时间
    });

    //  获取系统当前时间
    function nowDate() {
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        return year + '-' + month + '-' + date;
    }
</script>

2、layDate

<input id="date" type="text">

<script src="plugs/laydate/laydate.js"></script>
<script>
    laydate.render({
        elem: '#date',  //  指定元素
        lang: 'en',     //  指定语言
        value: nowDate(),   //  默认时间
        theme: '#393D49'    //  主题
    });

    //  获取系统当前时间
    function nowDate() {
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        return year + '-' + month + '-' + date;
    }
</script>

相关文章

网友评论

      本文标题:PC端比较好用的日期选择器

      本文链接:https://www.haomeiwen.com/subject/lbatbxtx.html