你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁?

其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date"就OK了,操作系统会自动识别为日期类型并调用系统自带的日期选择。不用在意日期控件的样式不统一,因为who cares?o(╯□╰)o,大家都是盯着自己的手机,谁选个日期还去比较其他手机呢?

最近看见有个比较牛逼的日期选择插件mobiscroll,网上的口碑特别好,我也下载过来玩了一下,之所以说他牛逼不完全是因为他高仿IOS和安卓的日期选择样式,而是他的售价居然高达800多$,好贵呀,而且看一下目录:5个css文件,7个js文件,尼玛这么多,当用户的流量不要钱么?

下面具体描述如何用HTML自带的date控件

HTML:

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

JS:
  $('#start_time').val(new Date());//设置当前日期为控件默认值

当然,写到这里有些童鞋会问我,它是date类型的,它的值可能是 Fri Apr 03 2015 15:15:00 GMT+0800 (中国标准时间),这堆玩意怎么存数据库啊,能不能转换为按我需要的string类型格式,当然可以!

JS:

 //日期格式化 formatStr:yyyy-MM-dd
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
var month=this.getMonth()+1;
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
str=str.replace(/MM/,month>9?month.toString():'0' + month);
str=str.replace(/M/g,month);
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
} $('#start_time').val(new Date().Format("yyyy-MM-dd"));//yyyy/MM/dd也可以,分隔号随你

总结:

技术的更新对我们开发者是有利的应当去尝试,特别在移动端可以充分的发挥HTML5的潜力,不要循规蹈矩的沿用第三方组件,移动端的性能就像个小娃娃,经不起大风大浪,我们要好好利用HTML5为我们开发者简化工作而提供的标签属性,尽可能少的加载js等第三方的组件。

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

  1. weui中的日期选择控件关于时间段的设置!

    近日用到了日期控件,但是需要把时和分去掉,功能上是做一个预约的功能,所以只需要在年月日后面提供时间段的选择. BUG在于如果第一次点开弹框而没做任何操作,然后点了其他任意区域则弹框关闭,甚至你的8:0 ...

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

    1.把文件夹拷贝到解决方案里面: 2.在前台页面添加对js文件的引用: <script language="javascript" type="text/javas ...

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

    input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...

  4. Ionic实战六:日期选择控件

    onic日期选择控件,用于ionic项目开发中的日期选择以及日期插件   

  5. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  6. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  7. 解析MySQL中存储时间日期类型的选择问题

    解析MySQL中存储时间日期类型的选择问题_Mysql_脚本之家 https://www.jb51.net/article/125715.htm 一般应用中,我们用timestamp,datetime ...

  8. C# 中带有中国农历的日期选择控件

    开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...

  9. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

随机推荐

  1. 视频播放(iOS开发)

    视频播放 一.视频播放介绍(5种实现方案) AVPlayer 优点 可以自定义UI,进行控制 缺点 单纯的播放,没有控制UI,而且如果要显示播放界面,需要借助AVPlayerLayer,添加图层到需要 ...

  2. 最新版postgresql+pgboucer安装

    安装postgresql: wget https://pgbouncer.github.io/downloads/files/1.7.2/pgbouncer-1.7.2.tar.gz wget htt ...

  3. linux shell突然显示-bash-4.1#的解决方法

    老沙昨天还登录这个linux服务器,并且命令行好好的,今天突然在linux shell中不显示路径了,显示为-bash-4.1#. 以下是老沙的解决方案 vim ~/.bash_profile 如果没 ...

  4. ThinkPHP3.1快速入门(2)数据CURD

    上一篇中,我们了解了ThinkPHP的基础部分,以及如何创建一个控制器和模板,并知道了M方法的用法,本篇将会讲解下数据的CURD操作,探索下更多的数据操作. CURD CURD是一个数据库技术中的缩写 ...

  5. Dragons

    http://codeforces.com/problemset/problem/230/A Dragons time limit per test 2 seconds memory limit pe ...

  6. jfinal拦截器301跳转

    在jfinal的handle中加入 HandlerKit.redirect301("http://10.10.3.144:8080/bbb.rar", request, respo ...

  7. 文件和目录之chdir、fchdir和getcwd函数

    每个进程都有一个当前工作目录,此目录是搜索所有相对路径名的起点(不以斜杠开始的路径名为相对路径名).当用户登录到UNIX系统时,其当前工作目录通常是口令文件(/etc/passwd)中该用户登录项的第 ...

  8. .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (一)

    .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (二) Json是WEB交互常见的数据,.net core 处理方式是转为强类型,没有对应的强类型会被抛弃,有时 ...

  9. 功能测试中遇到的一些有意思的bug

    2016.1.25 1.  Xss攻击型的bug Xss攻击即跨站脚步攻击,通过插入恶意脚本 ,实现对用户浏览器的控制. Bug现象:新增物品时,物品名称输入一段JavaScript代码,在提交时此代 ...

  10. 利用java开发一个双击执行的小程序

    之前我们利用java写了很多东西,但是好像都没有什么实际意义. 因为有意义桌面小程序怎么都得有个界面,可是界面又不太好搞.或者 了解到这一层的人就少之又少了. 呀,是不是还得开辟一些版面来介绍awt和 ...