Jquery中一款DataTimePicker日期选择器

最新推荐文章于 2024-03-14 11:54:35 发布

ime33

最新推荐文章于 2024-03-14 11:54:35 发布

阅读量2.3k

点赞数 1

分类专栏：前端组件文章标签： datatimepicker pikaday ime33 日期选择器 jquery

本文链接：https://blog.csdn.net/ime33/article/details/54575020

版权

前端组件专栏收录该内容

34 篇文章 1 订阅

订阅专栏

未经允许，不得转载！

水平有限，不周之处欢迎指正、交流！

http://blog.csdn.net/ime33

做日期选择的时候研究了下，前面说了一款javascript的pikaday日期插件，今天研究使用了下jquery的插件datatimepicker，总结下：

附上官网

效果图：

demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css">
        <title>http://blog.csdn.net/ime33  日期选择器</title>
    </head>
    <body>
        <label>日期：<input type="text" id="data1">-<input type="text" id="data2"></label>

        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="jquery.datetimepicker.js"></script>
        <script type="text/javascript">
            var date = new Date();
            $('#data1').datetimepicker();
            $('#data1').datetimepicker({
                yearOffset: 0,
                weekStart: 3,//一周从哪一天开始
                startDate: date,//var date = new Date()只能选现在之后的时间;
                endDate: date,//var date = new Date()这个时间后面的不能再选择;
                daysOfWeekDisabled: [0,4,6],//一周的周几不能选
                autoclose:false,//选完时间后是否自动关闭
                lang: 'ch',//语言
                timepicker: false,//关闭时间选项
                format: 'Y-m-d',//格式化日期yyyy-mm-dd hh:ii hh-yyyy-ii mm:dd等
                formatDate: 'Y-m-d',
                minDate: '1970-01-02', // yesterday is minimum date
                yearStart:2000,     //设置最小年份
                yearEnd:2050,        //设置最大年份
                todayButton:false,    //关闭当天按钮
                todayHighlight:true,//当天高亮
                keyboardNavigation:true,//方向键改变日期
                pickerPosition:"bottom-right",//选择框位置bottom-left’，’top-right’，’top-left’
                showMeridian :false,//是否显示上下午
                //initialDate :new Date()// 初始化日期时间
            });
            $('#data2').datetimepicker();
            $('#data2').datetimepicker({
                yearOffset: 0,
                lang: 'ch',
                timepicker: false,
                format: 'Y-m-d',
                formatDate: 'Y-m-d',
                minDate: '1970-01-02' // yesterday is minimum date
            });
        </script>
    </body>
</html>

总结下：使用起来还是挺方便的，只需传入参数即可，本身大小js+css在60K左右，外加一个jquery库包，另外一款pikaday纯js插件在36K左右；使用情况视喜好而定！都不错的东西！

不周之处，欢迎指正、交流！

ime33

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery中一款DataTimePicker日期选择器

未经允许，不得转载！水平有限，不周之处欢迎指正、交流！http://blog.csdn.net/ime33做日期选择的时候研究了下，前面说了一款javascript的pikaday日期插件，今天研究使用了下jquery的插件datatimepicker，总结下：附上官网效果图：demo：
复制链接

扫一扫

专栏目录