webapp中的日期选择

最新推荐文章于 2021-05-31 07:45:22 发布

aoevsa8140

最新推荐文章于 2021-05-31 07:45:22 发布

阅读量133

点赞数

文章标签：数据库移动开发操作系统

原文链接：http://www.cnblogs.com/xfhxbb/p/4435097.html

版权

你是否在开发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也可以，分隔号随你