sui picker,datetimepicker,citypicker代码整理

将sui中的sm.js sm.css 整理拆分删除了大量代码整理出来。

picker.css

picker.js

datetimepicker.js

city-picker.js

附件:http://down.51cto.com/data/2437983

具体使用方式如下:

<html>

   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>H5日期控件</title>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="css/picker.css">

      <script src="dist/js/jquery-1.11.3.min.js"></script>

      <script src="js/picker.js"></script>
      <script src="js/datetimepicker.js"></script>
      <script src="js/city-picker.js"></script>

      <style>

         body{
            padding:0;
            margin:0;
         }
         #picker,#datetime-picker,#city-picker{
            display:block;
            width:100%;
            height:44px;
            line-height: 44px;
            border:none;
            border-bottom:1px solid #dae1e7;
            padding:0 10px;
            font-size:14px;
         }
      </style>

   </head>

   <body>

      <input id="picker" type="text" readonly placeholder="请选择" unselectable="on"/>
      <input id="datetime-picker" type="text" readonly placeholder="请选择日期" unselectable="on"/>
      <input id="city-picker" type="text" readonly placeholder="请选择省市区" unselectable="on"/>

   </body>
   
   <script>

      $("#picker,#datetime-picker,#city-picker").on("focus", function() {
         $(this).trigger("blur");
      });

      $("#picker").click(function(e){
         e.preventDefault();
         var _this = this;
         var val = $(_this).val();
         val = !!val?[val]:null;
         var picker = new Picker(
            {
               onSelectCallback:function(picker){
                  var value = picker.value;
                  $(_this).val(value.join(""));
                  picker.close();
               },
               value:val,
               cols:[
                  {values:["苹果","橘子","香蕉","葡萄"]}
               ]
            }
         );

         picker.open();
      });

      $("#datetime-picker").click(function(){
         var _this = this;
         var val = $(_this).data("datetime");
         var picker = new DatetimePicker(
            {
               onSelectCallback:function(picker){
                  var value = picker.value;
                  $(_this).val(value.join("-"));
                  $(_this).data("datetime",value);
                  picker.close();
               },
               value:val,
               format:"yyyy年mm月dd日"
            }
         );

         picker.open();
      });

      $("#city-picker").click(function(){
         var _this = this;
         var val = $(_this).data("city");
         var picker = new CityPicker(
            {
               onSelectCallback:function(picker){
                  var value = picker.value;
                  $(_this).val(value.join(" "));
                  $(_this).data("city",value);
                  picker.close();
               },
               value:val
            }
         );

         picker.open();
      });
   </script>
</html>

原文地址:http://blog.51cto.com/antlove/2064653

时间: 2024-09-30 06:26:07

sui picker,datetimepicker,citypicker代码整理的相关文章

常用代码整理(重要)

常用代码整理: 1.判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,4}"; NSPredicate *emailTest = [NSPredicate predicateWithFormat:@"SELF MATC

css代码整理、收集

整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的——我日后发现有好的代码段会陆陆续续整理添加上去. css:ellipsis省略号 <style> .news{width:320px; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xm

Chrome应用技巧之代码整理。

我们有时候在看别人网站代码时往往是经过压缩的,代码都在一行上了,调试很是困难,今天给大家介绍一种基本Chrome浏览器的代码整理方法.请看图:

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu

关于UIImagePickerViewController拍摄video的分辨率和方向的一些代码整理

近期项目由于要使用拍摄视频,用的是UIImagePickerViewController,要求是分辨率640x480,但是试了各种 imagePickerController.videoQuality 拍出来的视频导出来依然达不到640x480. 并且旋转设备拍摄后拍摄出来的视频导出来也是反的. 最后查阅了各种网站找了各种资料之后,看到国外大牛在视频拍摄完成之后使用AVFoundation做的压缩和视频调整.整理了一下代码做了部分调整,感觉到AVfoundation的强大之处,哈哈 这些代码用在

常用js代码整理、收集

个人整理了一下个人常用到的一些js代码,以方便学习以及日后使用,或许有一些是个人之前从网上摘下来的,但是不记得是具体从哪里来的了,如果你看到有一段代码跟你的文章很相似甚至一样,请不要气愤,请告诉我,我必定加上版权链接. 清除输入框默然提示文字 1 <input type="text" name="word" value='请输入关键字' style="color:#ccc;" /> 2 <script> 3 /* 4 *清

Smtp邮件发送系统公用代码整理—总结

1.前言 a.在软件开发中,我们经常能够遇到给用户或者客户推送邮件,推送邮件也分为很多方式,比如:推送一句话,推送一个网页等等.那么在系统开发中我们一般在什么情况下会使用邮件发送呢?下面我简单总结了一下:总结不全,纯属于整理封装的类. (1):用户注册(推送邮件,提示用户注册成功,牢记用户名密码) (2):修改密码(推送邮件,提示用户密码修改成功) (3):下订单(推送邮件,提示用户订单已下) (4):物流跟踪(推送邮件,跟踪物流信息) (5):广告推送(推送广告,提示用户近来公司近况或者新的商

html Css PC 移动端 公用部分样式代码整理

css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {margin: 0; padding: 0; border: 0; outline: none;} ul, ol{list-style: none;} a{color: black;text-decora

Photon Server 实现注册与登录(二) --- 服务端代码整理

一.有的代码前端和后端都会用到.比如一些请求的Code.使用需要新建项目存放公共代码. 新建项目Common存放公共代码: EventCode :存放服务端自动发送信息给客户端的code OperationCode : 区分请求和响应 ReturnCode : 服务端响应码 ParameterCode : 解析参数Toos/DicTool.cs : 数据基本上都是用Dictionary读取,这里工具话一下. 二.代码 Toos/DicTool.cs using System.Collection