zoukankan      html  css  js  c++  java
  • 【jquery】多日期选择插件easyui date

    1、本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加。

    2、效果图:

    3、下载地址:http://www.jeasyui.com/download/index.php

    4、汉化:建议在使用页面:

    <script type="text/javascript" src="你的网站绝对地址/locale/easyui-lang-zh_CN.js"></script> 

    5、使用Demo:可参考http://www.jeasyui.com/demo/main/index.php?plugin=Calendar&theme=default&dir=ltr&pitem=Basic&sort=

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Basic Calendar - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/demo/demo.css">
        <script type="text/javascript" src="/Public/plugins/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/Public/plugins/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <h2>Basic Calendar</h2>
        <p>Click to select date.</p>
        <div style="margin:20px 0"></div>
        <div class="easyui-calendar" style="250px;height:250px;display:none;position: absolute;z-index: 999;margin-top: 22px;"></div>
        <input type="text" name="ftsj" value="" id="ftsj">
    
    </body>
    <script type="text/javascript">
    $(function(){
        $("#ftsj").focus(function(){
            $(".easyui-calendar").css("display","");
        });
        $(document).on("click",".calendar-day",function(){
            var date = $(this).attr("abbr");
            var date2 = date.replace(/,/g,"-");
            console.log("点击的日期=="+date2);
            //若需要进行存储,这里执行ajax 即可。
        })
    })
    </script>
    </html>

    6、注:如果和你页面样式有冲突,请去掉上面demo的demo.css

  • 相关阅读:
    group by 详解
    NHibernte教程(10)--关联查询
    NHibernate教程(9)一1对n关联映射
    NHibernate教程(8)--巧用组件
    NHibernate教程(7)--并发控制
    Git初步配置 ubuntu服务器 windows客户端 虚拟机
    设计模式之GOF23状态模式
    设计模式之GOF23模板模式
    设计模式之GOF23策略
    设计模式之GOF23访问者模式
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/9293510.html
Copyright © 2011-2022 走看看