EasyUI日期时间框DateTimeBox

字数 63阅读 115

WEB DEMO

日期时间框 DateTimeBox


image.png

流式日期时间框


image.png
<!DOCTYPE html>
<html>
<HTML>
<head>
<HEAD>
    <meta charset="UTF-8">
    <meta charset =“UTF-8”>
    <title>Fluid DateTimeBox - jQuery EasyUI Demo</title>
    <title> Fluid DateTimeBox  -  jQuery EasyUI演示</ title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / default / easyui.css”>
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / icon.css”>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <link rel =“stylesheet”type =“text / css”href =“../ demo.css”>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.min.js”> </ script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.easyui.min.js”> </ script>
</head>
</ HEAD>
<body>
<BODY>
    <h2>Fluid DateTimeBox</h2>
    <h2> Fluid DateTimeBox </ h2>
    <p>This example shows how to set the width of DateTimeBox to a percentage of its parent container.</p>
    <p>此示例显示如何将DateTimeBox的宽度设置为其父容器的百分比。</ p>
    <div style="margin:20px 0;"></div>
    <div style =“margin:20px 0;”> </ div>
    <p>width: 50%</p>
    <p>宽度:50%</ p>
    <input class="easyui-datetimebox" style="width:50%">
    <input class =“easyui-datetimebox”style =“width:50%”>
    <p>width: 30%</p>
    <p>宽度:30%</ p>
    <input class="easyui-datetimebox" style="width:30%">
    <input class =“easyui-datetimebox”style =“width:30%”>
</body>
</ BODY>
</html>
</ HTML>

日期时间框的初始化值


image.png
<!DOCTYPE html>
<html>
<HTML>
<head>
<HEAD>
    <meta charset="UTF-8">
    <meta charset =“UTF-8”>
    <title>Initialize Value for DateTime - jQuery EasyUI Demo</title>
    <title>初始化DateTime的值 -  jQuery EasyUI演示</ title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / default / easyui.css”>
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / icon.css”>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <link rel =“stylesheet”type =“text / css”href =“../ demo.css”>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.min.js”> </ script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.easyui.min.js”> </ script>
</head>
</ HEAD>
<body>
<BODY>
    <h2>Initialize Value for DateTime</h2>
    <h2>初始化DateTime的值</ h2>
    <p>The value is initialized when DateTimeBox has been created.</p>
    <p>创建DateTimeBox时初始化该值。</ p>
    <div style="margin:20px 0;"></div>
    <div style =“margin:20px 0;”> </ div>
    <input class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:200px">
    <input class =“easyui-datetimebox”value =“10/11/2012 2:3:56”style =“width:200px”>

</body>
</ BODY>
</html>
</ HTML>

显示到秒

<!DOCTYPE html>
<html>
<HTML>
<head>
<HEAD>
    <meta charset="UTF-8">
    <meta charset =“UTF-8”>
    <title>Display Seconds - jQuery EasyUI Demo</title>
    <title>显示秒数 -  jQuery EasyUI演示</ title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / default / easyui.css”>
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / icon.css”>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <link rel =“stylesheet”type =“text / css”href =“../ demo.css”>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.min.js”> </ script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.easyui.min.js”> </ script>
</head>
</ HEAD>
<body>
<BODY>
    <h2>Display Seconds</h2>
    <h2>显示秒数</ h2>
    <p>The user can decide to display seconds part or not.</p>
    <p>用户可以决定是否显示秒部分。</ p>
    <div style="margin:20px 0;">
    <div style =“margin:20px 0;”>
        <span>Show Seconds: </span>
        <span>显示秒数:</ span>
        <input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
        <input type =“checkbox”选中onchange =“$('#dt')。datetimebox({showSeconds:$(this).is(':checked')})”>
    </div>
    </ DIV>
    <input id="dt" class="easyui-datetimebox" style="width:200px">
    <input id =“dt”class =“easyui-datetimebox”style =“width:200px”>
    
</body>
</ BODY>
</html>
</ HTML>
image.png

基础日期时间框

image.png
<!DOCTYPE html>
<html>
<HTML>
<head>
<HEAD>
    <meta charset="UTF-8">
    <meta charset =“UTF-8”>
    <title>Basic DateTimeBox - jQuery EasyUI Demo</title>
    <title>基本DateTimeBox  -  jQuery EasyUI演示</ title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / default / easyui.css”>
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel =“stylesheet”type =“text / css”href =“../../ themes / icon.css”>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <link rel =“stylesheet”type =“text / css”href =“../ demo.css”>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.min.js”> </ script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type =“text / javascript”src =“../../ jquery.easyui.min.js”> </ script>
</head>
</ HEAD>
<body>
<BODY>
    <h2>Basic DateTimeBox</h2>
    <h2>基本DateTimeBox </ h2>
    <p>Click the calendar image on the right side.</p>
    <p>点击右侧的日历图片。</ p>
    <div style="margin:20px 0;"></div>
    <div style =“margin:20px 0;”> </ div>
    <input class="easyui-datetimebox" required style="width:200px">
    <input class =“easyui-datetimebox”required style =“width:200px”>
</body>
</ BODY>
</html>
</ HTML>

请点赞!因为你的鼓励是我写作的最大动力!

官方微信公众号

吹逼交流群:711613774

吹逼交流群

推荐阅读更多精彩内容