HTML5日期選擇器-調用手機的Datepicker的例子

現在在手機中開發的一些應用與網站越來越多了,對于日期選項卡我們不能像在網頁中一樣的展示了,下面一起來看一些關于HTML5日期選擇器-調用手機的Datepicker的例子


做的html5頁面的修改個人資料一欄,需要修改個人生日日期。除了使用phonegap/cordova的api來調用外,其實直接使用HTML5的input標簽屬性就可以實現了。

HTML4中的input類型
HTML4中的一些常用的類型
button:定義可點擊的按鈕(大多與 JavaScript 使用來啓動腳本)
checkbox:定義複選框
file:定義輸入字段和 "浏覽..." 按鈕,供文件上傳
hidden:定義隱藏輸入字段
image:定義圖像作爲提交按鈕
password:定義密碼字段。字段中的字符會被遮蔽。
radio:定義單選按鈕
reset:定義重置按鈕:重置按鈕會將所有表單字段重置爲初始值。
submit:定義提交按鈕,提交按鈕向伺服器發送數據。
text:默認。定義單行輸入字段,用戶可在其中輸入文本。默認是 20 個字符。
HTML5中新的input類型
HTML5 擁有多個新的表單輸入類型。新特性提供了更好的輸入控制和驗證,包含了如下新的輸入類型:
email:定義用于 e-mail 地址的文本字段
number:定義帶有 spinner 控件的數字字段
range:定義帶有 slider 控件的數字字段。
Date:定義日期字段(帶有 calendar 控件)
datatime:定義日期字段(帶有 calendar 和 time 控件)
datetime-local:定義日期字段(帶有 calendar 和 time 控件)
month:定義日期字段的月(帶有 calendar 控件)
week:定義日期字段的周(帶有 calendar 控件)
time:定義日期字段的時、分、秒(帶有 time 控件)
search:定義用于搜索的文本字段。
color:定義拾色器
tel:定義用于電話號碼的文本字段
url:定義用于 URL 的文本字段
HTML5中的datepicker
HTML5 擁有多個可供選取日期和時間的新輸入類型:
date – 選取日、月、年
month – 選取月、年
week – 選取周和年
time – 選取時間(小時和分鍾)
datetime – 選取時間、日、月、年(UTC 時間)
datetime-local – 選取時間、日、月、年(本地時間)

小實例:

HTML:
<input type="date">

修改默認樣式的自定義CSS:

input{ border:none;background: rgba(0,0,0,0);color:#9a9a9a; }
將顯示年月日選擇器,這一代碼在chrome上的效果:


HTML5日期選擇器-調用手機的Datepicker的例子


html5-data
在iPhone5s、iOS8上的效果:


HTML5日期選擇器-調用手機的Datepicker的例子


html5日期效果

手機端的選擇菜單 HTML:

<span>職業</span>

<select>
<option value ="volvo">學生</option>
<option value ="saab">教師</option>
<option value="opel">上班族</option>
<option value="audi">老板</option>
<option value ="volvo">公務員</option>
<option value ="saab">自由職業</option>
<option value="opel">退休</option>
<option value="audi">其他</option>
</select>

在iPhone5s、iOS8上的效果:

HTML5日期選擇器-調用手機的Datepicker的例子

更多相關文章
  • 在IOS開發中,有是爲了讓用戶方便,填日期的時候會彈出一個日期選擇器讓用戶選擇,現在我們來講講iOS開發時如何實現點擊UITextField彈出UIDatePicker日期選擇器UITextField是用來接受用戶輸入的控件,它的優點是靈活性大,用戶可以隨便輸入,但有時候這也是其缺點.對我們而言,典 ...
  • 近開發的一個模擬時鍾的時間選擇器 ClockPicker,用于 Bootstrap,或者單獨作爲一個 jQuery 插件.最近專案中需要用到一個時間選擇器,之前用到的 bootstrap-datetimepicker 在選擇日期時蠻好用,但是它的時間選擇(時:分)卻有點別扭,後來發現 Android
  • 本文章來給大家推薦一款不錯的jQuery Datepicker 日期選擇插件,本人測試過兼容 WordPress 和 WPML效果,希望些方法對各位有所幫助.1.下載jQuery核心文件就不用說了吧,datepicker是輕量級插件,只需jQuery的min版本就行了,然後下載datepicker(
  • jQuery移動觸摸設備的日期選擇插件 Mobiscroll使用示例
    日期選擇插件在jquery中隨便找都可以找出許多的這類插件出來了,今天我們介紹的是移動端的一個日期選擇插件Mobiscroll的使用方法,具體的細節如下所示.HTML5中新增日期類型的輸入控件<input type="date">,但日期選擇界面在不同浏覽器下的樣子也 ...
  • 下面來看一個css中filter濾鏡,ie9 hack寫法::root 選擇器妙用例子了,希望大家可以通過這個例子理深入的理解filter濾鏡的用法哦.需求: 實現一個層旋轉270deg,ie系列浏覽器全兼容源碼:
  • jquery 選擇器是jquery中非常重要的一個功能了,正是因爲有了jquery選擇器所有jquery才如此簡單了,下面小編來給各位同學介紹jquery 選擇器用法,希望對各位同學會有所幫助.jQuery 選擇器大
  • Bootstrap的Color Palette顔色選擇器
    Bootstrap是一款和jquery有點像的插件了,它也是美國一家大公司出的,下面我們來
  • CSS中Selection 僞類選擇器示例
    css中::selection可以重點顯示頁面中要顯示的內容了,如可以通過color , background-color ,background來進行設置下文來給各位介紹一個例子.::selection 僞類選擇器用于突出顯示的頁面用戶選擇的任何部分,包括可編輯文本字段中的文本.此僞元素可應用于
一周排行
  • mysql的觸發器在大數據量或高級web開發中碰到的比較多了,今天我們整理了一些關于mysql觸發器trigger的使用例子了,希望此例子能夠對各位朋友帶來有效的幫助了.爲什麽要使用觸發器 觸發器的優點 1,觸發器的
  • 我們經常會看到很多的網站評論Textarea文本框可以根據用戶輸入的文字自動調整高度哦,這種效果非常不錯我們這裏介紹jquery autotextarea來實現此功能.例1 代碼如下 <!DOCTYPE htm ...
  • 本文章來給大家介紹一篇超簡單的關于php正則表達式匹配無重複的5到10位數字實例,有需要了解的朋友可參考.對于有重複的5到10位數字可以使用d{5,10} 這樣的正則無重複的5到10位數字我考慮了一下還不會,最然只好
  • 如果apache上站點比較高,突然又感覺負載不起的情況下,我們如何快速的找出是哪段php出問題呢?現在我們來介紹一個mod_log_slow,他可以快速定位回應慢的php文件位置.apache+php站點負載時不時高
  • 本文章詳細的利用了一個實現來介紹關于asp.net pager分頁控件用法,有需要的同學可以參考一下本文章是如何操作的自己也以加以優化處理.這段代碼是 pager分頁控件的核心功能了 代碼如下 $.fn.extend ...
  • 本文章來給大家介紹一個php $_GET $_POST過濾sql注入程序代碼函數,希望些函數對各位朋友有幫助,此函數只能過濾一些敏感的sql命令了,像id=1這種大家還是需要自己簡單過濾了. 代碼如下 if (!ge ...
  • python實現手機APP自動簽到
    現在的app在應用已經到達了頂峰狀態了,一個小小的企業網站有時也要做一個app了,下文我們
  • centos系統上Munin監控安裝教程
    Munin 伺服器監控工具我們在安裝好之後可以監控伺服器的一個運行狀態了,下面來看看一篇關 ...
  • CentOS怎麽快速部署(Vsftpd)FTP伺服器呢,vsftpd就是windows中的ftp伺服器一樣我們只要安裝好了就可以實現文件上傳下載哦,下面我們一起來看看CentOS部署(Vsftpd)FTP伺服器方法吧 ...
  • Windows 8電腦不能識別新添加的USB設備、無線設備怎麽辦
    Windows 8不能識別各種無線設備的原因有很多中,下面我來給大家介紹具體導致無線設備無