sui picker,datetimepicker,citypicker代码整理

科技小能手 2017-11-12

css js open html type utf-8 input

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

picker.css

picker.js

datetimepicker.js

city-picker.js


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


具体使用方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<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>

1.jpg2.jpg3.jpg



 本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/2064653

登录 后评论
下一篇
云栖号资讯小编
630人浏览
2020-03-31
相关推荐
C# WinForm开发系列 - Controls
1308人浏览
2017-11-14 13:38:00
js日期时间选择器bootstrap
2240人浏览
2015-11-23 10:21:00
[UWP]实现Picker控件
519人浏览
2018-11-06 14:11:00
js事件冒泡和事件委托
829人浏览
2015-10-28 10:11:00
毕设demo写好
728人浏览
2015-01-20 15:08:00
微信WeUI扩展组件
1622人浏览
2018-08-31 16:52:00
0
0
0
1080