JQuery EasyUI(29)

最新推荐文章于 2022-11-19 17:11:20 发布

翻译最新推荐文章于 2022-11-19 17:11:20 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍JQuery EasyUI中DateTimeBox组件的使用方法，包括两种加载方式、属性设置如时间分隔符和秒显示，以及方法如设置值和获取时间微调器对象。适合初学者快速上手。

第二十九章：DateTimeBox（日期时间输入框）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box" class="easyui-datetimebox">
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box"> 
 </body>
</html>

$(function(){

   $.('#box').datetimebox({
     value:'2015-12-01 12:23:02',
  });
});

二、属性列表：

DateTimeBox属性，扩展自DateBox（日期输入框）组件
属性名	值	说明
timeSeparator	string	定义在小时、分钟和秒之间的分隔线。默认值为“：”。
showSeconds	boolean	定义是否显示秒钟信息。默认值为false。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box"> 
 </body>
</html>

$(function(){

   $.('#box').datetimebox({

     value:'2015-12-01 12:02:12',
     timeSeparator:'/',
     showSeconds:false,
  });
});

三、方法列表：

DateTimeBox方法，扩展自DateBox（日期输入框）
方法名	传参	说明
options	none	返回属性对象。
setValue	value	设置日期时间输入框的值。
spinner	none	返回时间微调器对象。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <input id="box"> 
 </body>
</html>

$(function(){

   $.('#box').datetimebox({

  });

  $.('#box').datetimebox('setValue','2015-12-01 17:11:22');
  console.log($.('#box').datetimebox('spinner').spinner('getValue'));

});

PS：我们可以使用$.fn.datetimebox.defaults重写默认值对象。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103060965

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载