言：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富文本編輯器的使用，拿走不謝

例簡介

1. 兼容IE8-11、360瀏覽器、chrome、firefox等主流瀏覽器，手機端也可使用；

2. 添加點擊前一周、后一周和高亮等功能。

實現原理

1、初始化周歷原理：

首先獲取表示當前星期幾的數字currDay = d.getDay()，一般是0（周日）-6（周六）；

然后把值取負數傳到方法creatWeeklyCalendar進行循環顯示一周時間；

Tips：方法calcTime是利用當前毫秒數+-循環數的毫秒數（someTime = d.getTime() + (24 * 60 * 60 * 1000) * num）算出這天的年月日。

for (var i = some, len = some + 7; i < len; i++) {
    if (this.calcTime(i).month == currMonth && this.calcTime(i).date == currDate) {
        html += '<li class="active"><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
    } else {
        html += '<li><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
    }
}

最后把html輸出到頁面。

2、前一周和后一周原理：

首先利用點擊前一周和后一周按鈕，對計算數clickedTimes進行+-；

然后把clickedTimes新值傳到方法changeWeek；

最后執行this.creatWeeklyCalendar(-currDay - (7 * clickedTimes))，重新輸出新一周的數據。

3、最后把構造函數暴露window.WeeklyCalendar = WeeklyCalendar。

全部代碼