webapp中的日期選擇

你是否在開發webapp時,選擇用哪一種第三方日期選擇控件絞盡腦汁?css

其實不用那麼麻煩,如今移動端都是WebKit內核,支持HTML5,其實只要弱弱的將input中將type="date"就OK了,操做系統會自動識別爲日期類型並調用系統自帶的日期選擇。不用在乎日期控件的樣式不統一,由於who cares?o(╯□╰)o,你們都是盯着本身的手機,誰選個日期還去比較其餘手機呢?web

最近看見有個比較牛逼的日期選擇插件mobiscroll,網上的口碑特別好,我也下載過來玩了一下,之因此說他牛逼不徹底是由於他高仿IOS和安卓的日期選擇樣式,而是他的售價竟然高達800多$,好貴呀,並且看一下目錄:5個css文件,7個js文件,尼瑪這麼多,當用戶的流量不要錢麼?數據庫

下面具體描述如何用HTML自帶的date控件app

HTML:webapp

1 <input id="start_time" name="start_time" type="date" class="form-control" />

JS:
 1 $('#start_time').val(new Date());//設置當前日期爲控件默認值 性能

固然,寫到這裏有些童鞋會問我,它是date類型的,它的值多是 Fri Apr 03 2015 15:15:00 GMT+0800 (中國標準時間),這堆玩意怎麼存數據庫啊,能不能轉換爲按我須要的string類型格式,固然能夠!this

JS:spa

 1 //日期格式化 formatStr:yyyy-MM-dd
 2 Date.prototype.Format = function(formatStr)   
 3   {   
 4       var str = formatStr;   
 5       var Week = ['日','一','二','三','四','五','六'];  
 6       var month=this.getMonth()+1;
 7       str=str.replace(/yyyy|YYYY/,this.getFullYear());   
 8       str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));      
 9       str=str.replace(/MM/,month>9?month.toString():'0' + month);   
10       str=str.replace(/M/g,month);   
11       str=str.replace(/w|W/g,Week[this.getDay()]);   
12       str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());   
13       str=str.replace(/d|D/g,this.getDate());   
14       str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());   
15       str=str.replace(/h|H/g,this.getHours());   
16       str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());   
17       str=str.replace(/m/g,this.getMinutes());      
18       str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());   
19       str=str.replace(/s|S/g,this.getSeconds());     
20       return str;   
21   }   
22 
23 $('#start_time').val(new Date().Format("yyyy-MM-dd"));//yyyy/MM/dd也能夠,分隔號隨你


總結:操作系統

技術的更新對咱們開發者是有利的應當去嘗試,特別在移動端能夠充分的發揮HTML5的潛力,不要循規蹈矩的沿用第三方組件,移動端的性能就像個小娃娃,經不起大風大浪,咱們要好好利用HTML5爲咱們開發者簡化工做而提供的標籤屬性,儘量少的加載js等第三方的組件。prototype

相關文章
相關標籤/搜索