jquery mobiscroll移动端日期选择控件(无乱码)
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

<title>Mobiscroll日期时间中文精简实例 ( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title>

<script src="dev/jquery-1.9.1.js"></script>

<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

<!-- S 可根据自己喜好引入样式风格文件 -->
<script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
<!-- E 可根据自己喜好引入样式风格文件 -->

<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #ddd;
}
input, select {
width: 100%;
padding: 5px;
margin: 5px 0;
border: 1px solid #aaa;
box-sizing: border-box;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 5px;
}
.header {
border: 1px solid #333;
background: #111;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
background-image: linear-gradient(#3C3C3C,#111);
background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
background-image: -moz-linear-gradient(#3C3C3C,#111);
}
.header h1 {
text-align: center;
font-size: 16px;
margin: .6em 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content {
padding: 15px;
background: #fff;
}

</style>

<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5 };
opt.datetime = {preset : 'datetime'};
opt.time = {preset : 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
lang:'zh',
startYear:currYear - 10, //开始年份
endYear:currYear + 10 //结束年份
};

$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
var optDateTime = $.extend(opt['datetime'], opt['default']);
var optTime = $.extend(opt['time'], opt['default']);
$("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
$("#appTime").mobiscroll(optTime).time(optTime);

//下面注释部分是上面的参数可以替换改变它的样式
//希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
// 直接写参数方法
//$("#scroller").mobiscroll(opt).date();
// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
//具体参数定义如下
//{
//preset: 'date', //日期类型--datatime --time,
//theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
//【wp light】【wp】
//mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
//display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
//dateFormat: 'yyyy-mm-dd', // 日期格式
//setText: '确定', //确认按钮名称
//cancelText: '清空',//取消按钮名籍我
//dateOrder: 'yymmdd', //面板中日期排列格
//dayText: '日',
//monthText: '月',
//yearText: '年', //面板中年月日文字
//startYear: (new Date()).getFullYear(), //开始年份
//endYear: (new Date()).getFullYear() + 9, //结束年份
//showNow: true,
//nowText: "明天", //
//showOnFocus: false,
//height: 45,
//width: 90,
//rows: 3}

});
</script>
</head>

<body>
<div class="header">
<h1>Mobiscroll精简实例</h1>
</div>

<div class="content">

<div class="demos">
<label for="appDate">日期</label>
<input type="text" name="appDate" id="appDate" />
</div>
<div class="demos">
<label for="appDateTime">日期时间</label>
<input type="text" name="appDateTime" id="appDateTime" />
</div>
<div class="demos">
<label for="appTime">时间</label>
<input type="text" name="appTime" id="appTime" />
</div>
</div>

</body>
</html>

</pre>
ps:必须用在intput上 如果要用回调 就只能setInterval刷新数据了

jquery mobiscroll移动端日期选择控件(无乱码)的更多相关文章

  1. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  2. 移动端日历选择控件（支持Zepto和JQuery）

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

  4. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

  5. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  6. js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  7. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  8. Swift - 日期选择控件（UIDatePicker）的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  9. Android自定义View（RollWeekView－炫酷的星期日期选择控件）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

随机推荐

  1. Hive 官方手册翻译 -- Hive DDL(数据定义语言)

    Hive DDL(数据定义语言) Confluence Administrator创建, Janaki Lahorani修改于 2018年9月19日 原文链接 https://cwiki.apache ...

  2. Python_函数传参

    关于函数中传递参数的相关知识 其中 万能参数 第一次听说 但感觉用处不大 后面用到再详细整理

  3. Eclipse 创建 Maven 项目

    本人也是新手小白,在创建 Maven 项目的时候几乎踩完了所有的坑.特此总结如下: 1.咱先选中 File -> New -> Maven Project 2.然后如下图    在这里说明 ...

  4. [Luogu2422]良好的感觉

    题目描述 kkk做了一个人体感觉分析器.每一天,人都有一个感受值Ai,Ai越大,表示人感觉越舒适.在一段时间[i, j]内,人的舒适程度定义为[i, j]中最不舒服的那一天的感受值 * [i, j]中 ...

  5. 第三方软件 vnc提权

    通过读取注册表十进制数 将得出的十进制数去掉第一个数其他转换成16进制 破解16进制数得到密码 vncx.exe -W 回车 输入16进制数 连接vnc 读取 vncx4.exe -w 8个数 自动破 ...

  6. Centos7 安装redis 并新建springboot工程使用Redis 做session

    Redis 安装 就是解压运行,根据自己的爱好,放到文件夹中 tar -zxvf redis-5.0.4.tar.gz yum install gcc cd redis-5.0.4 make MALL ...

  7. 玩转OneNET物联网平台之MQTT服务⑦ —— 远程控制LED（数量无限制）+ Android App控制 优化第一版

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  8. codeblocks 调试不停止的解决办法。

    CB的工程路径不能有中文,也不能有空格. 所以一定要全英文路径,而且空格要用下划线代替. 否则,调试的时候,codeblocks不会在断点处停止.

  9. selenium学习-拖拽页面元素

    一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...

  10. OptimalSolution(1)--递归和动态规划（4）其他问题

    一.汉诺塔问题(包括chapter 1中的汉诺塔问题) 二. 三. 四. 五. 六. 七. 八.