整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          漂亮嶄新的jquery日期控件 flexDate

          漂亮嶄新的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一句代碼實現的功能演示,一看就會,高手慎點

          (科技自媒體原創作者:錢莊王員外)


          主站蜘蛛池模板: 无码国产精品一区二区高潮| 人妻夜夜爽天天爽一区| 日本精品夜色视频一区二区| 久久精品国产第一区二区三区 | 亚洲国产情侣一区二区三区| 国产福利精品一区二区| 国产在线一区视频| 国产一区二区视频在线播放| 亚洲AV无码一区二区三区牲色| 亚洲福利视频一区二区| aⅴ一区二区三区无卡无码| 亚洲一区二区三区四区视频| 一区视频免费观看| 国产一区精品视频| 亚洲精品色播一区二区| 久久精品一区二区东京热| 台湾无码AV一区二区三区| 国产伦精品一区二区三区免费下载| 日本精品一区二区三区在线视频| 亚洲av乱码中文一区二区三区| 成人区精品人妻一区二区不卡| 女人18毛片a级毛片一区二区| 亚洲一区二区观看播放| 久久无码人妻一区二区三区| 久久久久人妻精品一区蜜桃| 国产A∨国片精品一区二区| 亚洲AV无码一区二三区| 国产精品美女一区二区| 加勒比精品久久一区二区三区| 亚洲a∨无码一区二区| 久久一区二区三区精品| 日本午夜精品一区二区三区电影| 国产激情无码一区二区app| 国偷自产一区二区免费视频| 亚洲AV综合色一区二区三区 | 免费萌白酱国产一区二区三区| 日本韩国一区二区三区| 无码人妻精品一区二| 国产在线观看一区二区三区精品 | 亚洲一区二区影院| 国产精品揄拍一区二区|