今天网上down了一下移动端jqueryMobile日期插件 ,可以是想修改一下样式,不知道怎么修改,请大神帮忙看下;
演示效果可以看下这里我这与的:http://www.erdangjiade.com/js...
效果图如下想修改为橙色的:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 开始设置桌面图标,自适应屏幕 -->
<title>移动端jqueryMobile日期插件 - 站长素材</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/icon-144.png">
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/icon-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- 结束设置桌面图标,自适应屏幕 -->
<!-- jqueryMobile的css文件 -->
<link rel="stylesheet" href="css/jqueryMobile.css">
<!-- 加载jquery文件 -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 加载jqueryMobile文件 -->
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<!--mobiscroll日期插件-->
<link href="css/mobiscroll.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.js" type="text/javascript"></script>
<script type="text/javascript">
// 初始化插件内容
var opt_data = {
preset: 'date', //日期格式 date(日期)|datetime(日期加时间)
theme: 'jqm', //皮肤样式
display: 'modal', //显示方式
mode: 'clickpick', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
yearText: '年', monthText: '月', dayText: '日', //面板中年月日文字
endYear:2020, //结束年份
showNow:true,
nowText:'今天',
hourText:'小时',
minuteText:'分'
};
// 使用定义插件
$(document).on("pageinit", "#pageone", function(){
$("#txtBirthday").mobiscroll(opt_data);
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>系统登录界面</h1>
</div>
<div data-role="content">
<h2 style="color: #468dcc">请输入正确信息</h2>
<form method="post" action="index.php">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
<label for="password">密码</label>
<input type="password" name="password" id="password" />
<label for="system">选择系统</label>
<select id="system" name="system" data-native-menu="false">
<option selected>血液透析信息管理系统</option>
<option>生物样本库管理系统</option>
<option>腹膜透析管理系统</option>
</select>
<input type="button" name="zhuce" value="注 册" data-inline="true" />
<input type="submit" name="sub" value="提 交" data-inline="true" class="ui-btn-right" />
<!-- 日期插件 -->
<label for="txtBirthday">登录时间:</label>
<input type="text" data-role="datebox" id="txtBirthday" name="txtBirthday" />
</form>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.erdangjiade.com/" target="_blank">站长素材</a></p>
</div>
</div>
</body>
</html>