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

时间: 2024-11-07 14:52:54

webapp中的日期选择的相关文章

ASP.NET文本框中添加日期选择控件

1.把文件夹拷贝到解决方案里面: 2.在前台页面添加对js文件的引用: <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.在要使用日历控件的控件添加click事件:(WdatePicker 为主调函数 ) <asp:TextBox ID="TextBox3&

取消layUI中日期选择控件默认填充日期

input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效果, 最后发现可以在绑定时将value一项设置为空,而非new Data()的值, laydate.render({    elem: '#param_monthid',    type: 'month',    format: 'yyyyMM',    value: '',    max: year + &

DatePicker - 日期选择插件

在一些WEB系统中,日期选择插件必不可少的功能,今天为大家分享几个不错的日期选择插件.希望对大家有所帮助. 1)My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置. 主页: http://www.my97.net/dp/index.asp 演示地址: http://www.my97.net/dp/demo/index.htm 2)Date Range

icker - 日期选择插件

DatePicker - 日期选择插件 在一些WEB系统中,日期选择插件必不可少的功能,今天为大家分享几个不错的日期选择插件.希望对大家有所帮助. 1)My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置. 主页: http://www.my97.net/dp/index.asp 演示地址: http://www.my97.net/dp/demo/in

安卓开发中的双日期选择控件(可隐藏日,只显示年月)

在安卓开发中,会碰到选开始日期和结束日期的问题.特别是在使用Pad时,如果弹出一个Dialog,能够同时选择开始日期和结束日期,那将是极好的.我在开发中在DatePickerDialog的基础上做了修改,实现了这种Dialog.效果如下: 具体实现方法为: 先新建一个安卓项目DoubleDatePicker,在res/layout文件夹下新建date_picker_dialog.xml,内容如下: 1 <?xml version="1.0" encoding="utf-

用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.android实现自绘日期选择控件 目的: 通过一个相对复杂的自定义自绘控件来分享: 1.ios以及android自定义自绘控件的开发流程 2.objc与c/c++混合编程 3.android ndk的环境配置,android studio ndk的编译模式,swig在android ndk开发中的作

mobiscroll日期选择插件移动端插件文本选择插件

移动端选择插件mobiscroll的使用demo 一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这文章有更好的写法还望赐教~ 首先是常用的日期使用: HTML部分: <li id="birthday"> <div class="mbase-menu-title">生日</div>

jquery做个日期选择适用于手机端

第一步:做个 文本框用于显示年月日的 第二步:点击文本框触发bootstrap模态框并显示 第三步:我是建一个外部js页面写的 js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 var date=new Date; var year=date.getFullYear();  var month=date.getMonth()+1; month =(month<10 ? "0"+month:month);  var mydate = (year.t

数据库中存储日期的字段类型到底应该用varchar还是datetime

将数据库中存储时间的数据类型改为varchar(),这时最好让这些时间是数据库中自动生成的(一个没有格式的输入也可能会导致输出错误),因为存储类型为varchar(),所以获取到的值也就被认为是一个字符串,直接将数据库中的时间字符串进行转化(这时那些转化函数是能识别数据库中的时间函数的),客户端的时间格式不再影响转换过程. 不过数据库中存储时间的类型如果为字符型也会带来一些麻烦: 数据库中的时间仅仅是用来显示.查找的,那么影响还不算大,但如果对时间字段进行一些算法如计算星期.DateDiff.D