zoukankan      html  css  js  c++  java
  • 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等第三方的组件。

  • 相关阅读:
    lamp环境安装二
    ubuntu14.04 sublime 出错
    lamp环境安装一
    jsp(Java Server Pages)和js(JavaScript)的区别:
    form表单验证jquery
    数据库分离 脱机
    数据绑定ds.ReadXml(stream);
    自定义类型转化
    temp
    一般处理程序获得一个链接返回的值
  • 原文地址:https://www.cnblogs.com/xfhxbb/p/4435097.html
Copyright © 2011-2022 走看看