漂亮崭新的jquery日期控件 flexDate

定义了一款新新的可爱的时间控件，兼容ie8+

使用

引入css

 <link rel="stylesheet" href="dist/css/flexDate.min.css">

引入js

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dist/js/flexDate.min.js"></script>

调用

//类方法设置本页面的皮肤颜色
FlexDate.setSkin('#ff8000');
var date=new FlexDate({
 e: '.flexDate1',
 format: 'yyyy-MM-dd HH:mm:ss',
 value: '2017-07-08 12:30:30',
 clearBtn: true,
 todayBtn: true,
 confirmBtn: true,
 min:'2017-07-01',
 max:new Date(),
 zIndex:999,
 bindClick:true,
 confirm: function (value) {}
 });

快速实例化

当文本框的class设置为flexDate的时候,控件会自动实例化,并根据文本框的属性做参数,如：

 <input type="text" readonly class="flexDate" format="yyyy年MM月dd日" clearBtn="false" confirm="confirm"/>

其中confirm函数需在全局执行环境定义

项目

示例：https://wtjperi2003.oschina.io/flexdate/
gitee：https://gitee.com/wtjperi2003/flexdate

言：mm再也不用担心我找不到合适好看的日期选择插件了，今天分享三款纯jquery移动端日期时间选择插件，赶紧点赞收藏转发吧。

一、jQuery移动端触屏滑动时间日期选择插件

简介：jQuery移动端触屏滑动时间日期选择插件，点击文本框触发时间选择控件，默认选择当前日期，选好的以红色显示。

js代码：

<script> 
   //选择 YYYY-MM-dd 格式的调用： 
   $.selectYY_MM_DD("#select_0"); 
 
   $('.title').html('选择起始时间') 
//    $(function () { 
//             var currYear=(new Date()).getFullYear();    
//             var opt={}; 
//             opt.date={preset : 'date'}; 
//             opt.default={ 
//                 theme: 'android-ics light', //皮肤样式 
//                 display: 'modal', //显示方式  
//                 mode: 'scroller', //日期选择模式 
//                 lang:'zh', 
//                 startYear:currYear-10, //开始年份 
//                 endYear:currYear + 10 //结束年份 
//             }; 
              
//             $("#start_kdsj").val('').scroller($.extend(opt['date'], opt['default'])); 
//             $("#end_kdsj").val('').scroller($.extend(opt['date'], opt['default'])); 
//         }); 
</script> 
<script> 
    $.selectYY_MM_DD("#select_1"); 
 
           var myDate=new Date; 
            var year=myDate.getFullYear(); //获取当前年 
            var mon=myDate.getMonth() + 1; //获取当前月 
            var date=myDate.getDate(); //获取当前日 
            console.log(year,mon,date) 
</script>

二：简单的jQuery移动端日期时间选择插件

简介：一款简单的jQuery手机移动端日期时间选择插件，点击输入框遮罩弹出日期时间选择器，手机触屏滑动分别选择年、月、日、时、分。

js代码：

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.date.js"></script> 
<script type="text/javascript"> 
$.date('#date3'); 
</script>

三：datePicker简单的手机移动端日期选择插件

简介：datePicker是一款非常简单易用的手机移动端日期选择插件，点击输入框触发弹出年月日滑动选择控件。

js代码：

<script src="datePicker.js"></script> 
    <script> 
    var calendar=new datePicker(); 
calendar.init({ 
    'trigger': '#demo1', /*按钮选择器，用于触发弹出插件*/ 
    'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ 
    'minDate':'1900-1-1',/*最小日期*/ 
    'maxDate':'2100-12-31',/*最大日期*/ 
    'onSubmit':function(){/*确认时触发事件*/ 
        var theSelectData=calendar.value; 
    }, 
    'onClose':function(){/*取消时触发事件*/ 
    } 
}); 
     
    </script>

以上是为大家分享的三款纯jquery移动端日期时间选择插件，有需要以上代码的可以在下方给我留言。

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

往期文章分享：

程序员搞笑的段子，总有一条戳中你的笑点

微信小程序editor富文本编辑器的使用，拿走不谢

例代码分别有选项卡、顺序可调整的菜单、可调整大小的DIV、日期控件，堪称jquery一句代码系列。

前面的视频已经演示了，下面是展示源码：

选项卡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>

顺序可调整菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>

可调整大小Div

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable">
<h3>Resizable</h3>
</div>
</body>
</html>

日期控件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

视频演示：

加快进度，jquery一句代码实现的功能演示，一看就会，高手慎点

（科技自媒体原创作者：钱庄王员外）

在线咨询

上一篇：2019年最新超级有趣好玩的html+css网页布局
下一篇：使用 Next.js 和 Tailwind CSS

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

漂亮崭新的jquery日期控件 flexDate

使用

快速实例化

项目

选项卡

顺序可调整菜单

可调整大小Div

日期控件

视频演示：

您的项目需求