jQuery手機端年月日日期時間選擇

jQuery手機端年月日日期時間選擇

工具/原料

adobe dreamweaver

方法/步驟

新建html文檔。

書寫hmtl代碼。

<div class="demo">

<div class="lie">日期設置-1:<input  id="beginTime" class="kbtn" /></div>

<div class="lie">日期設置-2:<input id="endTime" class="kbtn" /></div>

</div>

<div id="datePlugin"></div>

書寫css代碼。

body, div, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding:0;margin:0; font-size:14px; }

ul,li{ list-style: none;list-style-type:none;}

.page {display: none;position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;overflow: hidden;}

#datescroll div{float: left;margin-left: 10%;margin-top: 15px;padding-right: 22px;}

#datescroll_datetime div{float: left;margin-left: 10%;padding-right: 22px;}

#yearwrapper{position: absolute;left: 0;top:45px;bottom: 60px;width:80%;}

#monthwrapper{position: absolute;left: 26%;top:45px;bottom: 60px;width:80%;}

#daywrapper{position: absolute;left: 50%;top:45px;bottom: 60px;width:80%;}

#Hourwrapper{position: absolute;left: 0;top:195px;bottom: 68px;width:80%;}

#Minutewrapper{position: absolute;left: 26%;top:195px;bottom: 68px;width:80%;}

#Secondwrapper{position: absolute;left: 50%;top:195px;bottom: 68px;width:80%;}

#Hourwrapper ul li{color: #898989;font-size: 16px;}

#Minutewrapper ul li{color: #898989;font-size: 16px;}

#Secondwrapper ul li{color: #898989;font-size: 16px;}

#Secondwrapper ul{ margin-top:3px;}

#yearwrapper ul li{color: #898989;font-size: 16px;}

#monthwrapper ul li{color: #898989;font-size: 16px;}

#daywrapper ul li{color: #898989;font-size: 16px;}

#markyear{position:relative; margin-left: 76px;top:-2px;}

#markmonth{position:relative; margin-left: 40px;top:-2px;}

#markday{position:relative; margin-left: 42px;top:-2px;}

#markhour{position:relative; margin-left: 62px;top:-2px;}

#markminut{position:relative; margin-left: 58px;top:-2px;}

#marksecond{position:relative; margin-left: 68px;top:-2px;}

#dateheader{width: 100%;height: 50px;background: #79C12F;text-align: center;color: #fff;line-height: 50px;font-size: 20px;}

#setcancle ul{text-align: center;line-height: 30px; margin:1px auto;font-size: 20px;}

#setcancle ul li{border-radius:3px;float: left;width: 40%;height: 30px;list-style-type: none;font-family:'microsoft yahei';font-size:16px;}

#dateconfirm{position: absolute;background:#f75e46;left:20px;color:#fff;}

#datecancle{position: absolute;background:  #dcdddd;right:20px;width: 40%;color:#666;}

#dateshadow{display: none;position: absolute;width: 100%;height: 100%;top:0;left:0;background: #000; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}

#datePage{font-size: 22px; border-radius: 3px; position:fixed;top:110px;MARGIN-RIGHT: auto;vertical-align:middle;

MARGIN-LEFT: auto;width: 80%;;height: 240px;background: #FFFFFF;z-index:9999999;}

#datetitle{width: 100%;height:50px;background: #f75e46;text-align: center;color: #fff;line-height: 50px;font-size: 20px;font-family:'microsoft yahei';}

#datetitle h1{font-weight:normal; font-size:24px;}

#datemark{font-size: 18px;left:5%;width: 90%;height: 30px;position:absolute;top:105px;background:#eee;border:1px solid #eee;}

#timemark{font-size: 18px;left:5%;width: 90%;height: 30px;position:absolute;top:240px;background:#eee;border:1px solid #eee;}

#datescroll{background: #F8F8F8;width:94%; margin:10px 3%;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}

#datescroll_datetime{display: none;background:#F8F8F8;width:94%; margin:10px 3%;margin-top: 10px;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}

#yearwrapper ul,#monthwrapper ul,#daywrapper ul{width:40%;}

#Hourwrapper ul,#Minutewrapper ul,#Secondwrapper ul{width:40%;}

#dateFooter{width:100%;background: #fff;height: 50px;bottom: 0px;position: absolute;}

書寫並添加js代碼。

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/date.js" ></script>

<script>

$(function(){

$('#beginTime').date();

$('#endTime').date({theme:"datetime"});

});

</script>

代碼整體結構。

查看效果。

相關文章

  1. jQuery手機端酒店預訂日期選擇

    jQuery手機端酒店預訂日期選擇 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div id="checkinout" ...
  2. html+css3+jQuery手機端下拉動畫時間軸

    html+css3+jQuery手機端下拉動畫時間軸 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div class="con ...
  3. jQuery手機端省市二級聯動選擇特效

    jQuery手機端省市二級聯動選擇特效 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div class="slide-wapp ...
  4. jQuery手機端大轉盤抽獎活動代碼

    jQuery手機端大轉盤抽獎活動代碼 工具/原料 adobe dreamweaver 方法/步驟 準備好需要用到的圖標. 新建html文檔. 書寫hmtl代碼. <div class=" ...
  5. jQuery手機端觸屏滑動刻度尺選值

    jQuery手機端觸屏滑動刻度尺選值 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div class="page" ...
  6. jQuery手機端首字母查詢城市

    jQuery手機端首字母查詢城市 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div id="top_nav" st ...
  7. jQuery手機端拖動滑塊選值

    jQuery手機端拖動滑塊選值 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼.<div class="demo">  ...
  8. jQuery手機端下拉搜尋框

    jQuery手機端下拉搜尋框 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <h1>網站首頁</h1> <butto ...
  9. jQuery手機端常見問題列表展開收縮代碼

    jQuery手機端常見問題列表展開收縮代碼 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼.<div data-role="page& ...
  10. 手機端日期時間選擇代碼

    手機端日期時間選擇代碼 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. html書寫. <center> <input type="text ...
  11. jQuery電腦手機端通用銀行選擇下拉菜單

    jQuery電腦手機端通用銀行選擇下拉菜單 工具/原料 adobe dreamweaver 方法/步驟 準備好需要用到的圖標.這裡還需要自己準備銀行卡logo圖標 新建html文檔. 書寫hmtl代碼 ...
  12. 兼容手機端的jQuery日曆設置當天價格庫存

    兼容手機端的jQuery日曆設置當天價格庫存 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼.<div class="containe ...
  13. alert.js+jQuery兼容電腦手機端彈出層

    alert.js+jQuery兼容電腦手機端彈出層 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <ul class="alert ...
  14. jQuery手機移動端帶上午下午日期時間選擇

    jQuery手機移動端帶上午下午日期時間選擇 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <center> <body sty ...
  15. PC手機端通用的jQuery響應式

    PC手機端通用的jQuery響應式 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div class="swiper-conta ...
  16. jQuery日期時間選擇

    jQuery日期時間選擇 工具/原料 adobe dreamweaver 方法/步驟 準備好需要用到的圖標. 新建html文檔. 書寫hmtl代碼. <center> <div cl ...
  17. jQuery適合手機端滑動解鎖

    jQuery適合手機端滑動解鎖 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div id="slide-wrapper&quo ...
  18. jQuery響應式手機端觸屏滑動圖片輪播

    jQuery響應式手機端觸屏滑動圖片輪播 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 準備好需要用到的圖標. 書寫hmtl代碼. <div class=&qu ...
  19. 怎麼發布手機端寶貝

    現在越來越多的用戶喜歡上用手機購物,各大電商平台也跟把腳步移動到手機端上,手機端的流量也會大量增長,因此讓寶貝商品很好地在手機端上展現是非常重要的,寶貝手機淘寶詳情頁的展現能吸引更多逛淘寶的朋友,從而 ...
  20. 如何使用PC端迅雷和手機端迅雷搜尋資源?

    熱播的電視劇,上映的電影,等等.想看有些軟體還要你付費!哈哈,沒有迅雷搜不到的資源!(你懂的!),那麼我們應該如何搜尋到我們需要的資源呢? 工具/原料 聯網計算機一台或智慧型手機一部 手雷 方法/步驟 ...