漂亮嶄新的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" >
<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" >
<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" >
<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" >
<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

日期控件

視頻演示：

您的項目需求