EasyUI 时间插件使用配置

一,在项目中引入jquery-easyui

二,静态资源映射

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

三,页面配置

  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>

四,常用方法    

           获取时间:<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>

五,效果图

时间: 2024-11-10 16:49:03

EasyUI 时间插件使用配置的相关文章

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

vim插件和配置

vim插件和配置 插件 pathogen 可以方便地管理vim插件 在没有pathogen的情况下,vim插件的文件全部都放在.vim目录,卸载插件很麻烦,pathogen可以将不同的插件放在一个单独的目录下,安装插件只需要将插件的文件夹复制到制定文件夹(bundle)内,卸载插件时只需要删除文件夹,方便好用. 以下插件都可以采用“下载zip包到vundle文件夹,解压zip包”的方法进行安装 下载及安装https://github.com/tpope/vim-pathogen nerdtree

VisualVm插件安装配置

打开Java VisualVm->工具->插件  如图: 关于要填写的URL地址到 http://visualvm.java.net/pluginscenters.html 找到jdk版本以及更新版本对应的插件中心地址. 当VisualVM不能下载插件时查看是不是上面的地址有问题. 常用的扩展插件: Visual GC:监视每一部分需要的时间,方便我们进行调优 jconsole plugins 安装完之后需要做如下配置: 在配置jconsole plugins的地方,Add JAR/Folde

Angular Js -moment Picker 时间插件(时间段选择)

Angular Js -moment Picker  时间插件(时间段选择) 一.moment Picker  插件的下载.引用及配置就不在多说了,直接暴力上代码 二.Html <span>{{ctrl.newchoose}}</span> <span id='#showEndTimeError' placeholder="请选择日期" moment-picker="ctrl.chooseFormatted" format="

工作笔记---js时间插件的使用

工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现时分秒) 需要引入的相关js: 1 <link rel="stylesheet" type="text/css" href="css/jquery.ui.custom.min.css" /> 2 <script type="

轻松把玩HttpClient之封装HttpClient工具类(二),插件式配置HttpClient对象

上一篇文章中,简单分享一下封装HttpClient工具类的思路及部分代码,本文将分享如何实现插件式配置HttpClient对象. 如果你看过我前面的几篇关于HttpClient的文章或者官网示例,应该都知道HttpClient对象在创建时,都可以设置各种参数,但是却没有简单的进行封装,比如对我来说比较重要的3个:代理.ssl(包含绕过证书验证和自定义证书验证).超时.还需要自己写.所以这里我就简单封装了一下,顺便还封装了一个连接池的配置. 其实说是插件式配置,那是高大上的说法,说白了,就是采用了

轻松把玩HttpClient之封装HttpClient工具类(三),插件式配置Header

上篇文章介绍了插件式配置HttpClient,本文将介绍插件式配置Header. 为什么要配置header在前面已经提到了,还里再简单说一下,要使用HttpClient模拟请求,去访问各种接口或者网站资源,都有可能有各种限制,比如说java客户端模拟访问csdn博客,就必须设置User-Agent,否则就报错了.还有各种其他情况,必须的设置一些特定的Header,才能请求成功,或者才能不出问题. 好了就说这么多,本次还是采用构造者模式的级联调用方式,来完成该工具类.在该工具类中,为所有常用的Ht

easyui时间格式问题

问题描述: 前端使用EasyUI,后台使用Spring MVC, 数据库里面存储的时间格式为:2014-06-10,但是后台返回给前台页面的数据是json格式的,类似于:1402367297000的形式,日期列datebox是无法解析的.具体如下图: 自己也是EasyUI小白,网上查查资料,倒腾下总算搞出来了,这里做下记录. 一般情况下我们所需的日期格式都是:2014-02-02或者2014/09/09形式的,因此首先要考虑实现一个添加日期格式化的插件. jQuery日期格式化 在自己的js中添

好用的bootstrap中的时间插件-bootstrap-datepicker

bootstrap-datepicker是bootstrap中一款好用的时间插件,支持中文,支持时间段的选择,支持时间格式配置,在线示例中用法提供友好. 点击页面上的配置,右下角的代码同步更新. 1.下载bootstrap-datepicker中放在bootstrap文件夹. 在页面进行css引用 <link rel="stylesheet" href="bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.m