您的位置:时时app平台注册网站 > web前端 > Easy-UI中datebox的默认显示当前日期的最简单的两种

Easy-UI中datebox的默认显示当前日期的最简单的两种

2019-11-03 13:28

最后,如果想要datebox显示的是中文,那么请在jquery.easyui.min.js引入locale/easyui-lang-zh_CN.js即可。

五,效果图

彩世界网址 1

提醒:使用easy-UI框架,javascript出现"Uncaught TypeError: Cannot read property 'options' of undefined" /xxx/jquery-easyui-1.5.5/jquery.easyui.min.js (15933)报错时,有可能是你写的javascript代码没有放在window.onload=function(){}或$(function(){})之中。

一,在项目中引入jquery-easyui

------------------------------------题外话------------------------------------
Easy-UI使用一般需要引入2个css文件和2个js文件即可,文件名如下:
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.5/jquery.easyui.min.js"></script>

四,常用方法    

           获取时间:<input type="button" value="获取时间" onclick="getDate()">

        填充时间:<input type="button" value="填充时间" onclick="setDate()">

        <script type="text/javascript">

        //获取时间

        function getDate(){

        alert($('#begindate').datebox('getValue'));

        }

        //填充时间

        function setDate(){

        $("#begindate").datebox('setValue','2017-11-11');

        }

        </script>

在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'。
所以我们可以使用'currentText'和'Today'来默认显示当前日期。
1.使用属性data-options="value:'currentText'"data-options="value:'Today'"
2.使用javascript设置$('#datebox1').datebox('setValue','Today')或$('#datebox1').datebox('setValue','currentText');

三,页面配置

  1)在head中引入:

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css"/>

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css"/>

        <script type="text/JavaScript" src="jquery-easyui-1.5.2/jquery.min.js"/></script>

        <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"/></script>

        <script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"/></script><!--  汉化  -->

  2)在需要使用时间的地方放置标签:          

        开始日期:<input class="easyui-datebox" name="begindate" id="begindate"
        data-options="formatter:myformatter,parser:myparser"></input>

  3)设置时间格式:

        <script type="text/javascript">

        <!-- 设置时间格式 原来是12-11-2017 设置之后是2017-11-12 -->
        <script type="text/javascript">
        function myformatter(date) {

        var y = date.getFullYear();

        var m = date.getMonth() 1;

        var d = date.getDate();

        return y '-' (m < 10 ? ('0' m) : m) '-'

         (d < 10 ? ('0' d) : d);
        }
        function myparser(s) {

        if (!s)

        return new Date();

        var ss = (s.split('-'));

        var y = parseInt(ss[0], 10);

        var m = parseInt(ss[1], 10);

        var d = parseInt(ss[2], 10);

        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {

        return new Date(y, m - 1, d);

        } else {

        return new Date();

          }
        }

        </script>

二,静态资源映射

  1)<mvc:resources mapping="/jquery-easyui-1.5.2/**" location="/easyui/" />

本文由时时app平台注册网站发布于web前端,转载请注明出处:Easy-UI中datebox的默认显示当前日期的最简单的两种

关键词: