webapp中的日期選擇

標籤：

你是否在開發webapp時，選擇用哪種第三方日期選擇控制項絞盡腦汁？

其實不用那麼麻煩，現在移動端都是WebKit核心，支援HTML5，其實只要弱弱的將input中將type="date"就OK了，作業系統會自動識別為日期類型並調用系統內建的日期選擇。不用在意日期控制項的樣式不統一，因為who cares？o(╯□╰)o，大家都是盯著自己的手機，誰選個日期還去比較其他手機呢？

最近看見有個比較牛逼的日期選擇外掛程式mobiscroll，網上的口碑特別好，我也下載過來玩了一下，之所以說他牛逼不完全是因為他高仿IOS和安卓的日期選擇樣式，而是他的售價居然高達800多$，好貴呀，而且看一下目錄：5個css檔案，7個js檔案，尼瑪這麼多，當使用者的流量不要錢嗎？

下面具體描述如何用HTML內建的date控制項

HTML：

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類型格式，當然可以！

JS：

 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等第三方的組件。

webapp中的日期選擇