您的位置：首页 > 产品设计 > UI/UE

sui picker,datetimepicker,citypicker代码整理

2018-01-24 15:42 260 查看

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

picker.js
datetimepicker.js
city-picker.js

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

具体使用方式如下:

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： sui picker datetimepicker citypicker

相关文章推荐

新的分享

章节导航