最好的日期选择插件jedate完整示例

最新推荐文章于 2024-03-15 11:09:51 发布
最新推荐文章于 2024-03-15 11:09:51 发布
阅读量1.4k 收藏
点赞数
文章标签： 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhezhebie/article/details/77184542
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="/application/views/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <script type="text/javascript" src="/application/views/static/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/application/views/static/jedate/skin/jedate.css">
  <script type="text/javascript" src="/application/views/static/jedate/jquery.jedate.min.js"></script>

  <style type="text/css">
    .wrap{
    width: 350px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    }
  </style>

  <script type="text/javascript">

  $(document).ready(function(){
    $("#download").click(function(){
        console.log($("form").serialize());
              window.open('http://dwq.xxx.com/OutPutExcel/outExcel/?'+$("form").serialize(), '下载文件');
          })
      });

  $(function() {
              $("#time_picker_start").jeDate({
                  format: "YYYY-MM-DD hh:mm:ss",
                  isTime: true,
                  // festival:true,
                  isinitVal:true,
                  initAddVal:{DD:"-3"},
                  minDate: "2014-09-19 00:00:00"
              })
          })

  $(function() {
              $("#time_picker_end").jeDate({
                  format: "YYYY-MM-DD hh:mm:ss",
                  isTime: true,
                  // festival:true,
                  isinitVal:true,
                  minDate: "2014-09-19 00:00:00"
              })
          })
  </script>
</head>
<body>
  <div class="container" style="margin-top: 30px;">
    <form class="form-horizontal" action="" method="get" role="form">
      <div class="form-group">
          <label for="weixin_url" class="col-xs-4 col-sm-2 control-label">模糊搜索</label>
          <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" autofocus="true" name="search" id="weixin_url" value="<?php echo $list['search']; ?>" placeholder="输入地址或者备注即可搜索">
          </div>
      </div>
      <div class="form-group">
        <label for="class_selecte" class="col-xs-4 col-sm-2 control-label">起始时间</label>
        <div class="col-xs-8 col-sm-9">
        <input type="text"  class="form-control" name="start_time" id="time_picker_start">
        </div>
      </div>
      <div class="form-group">
        <label for="class_selecte" class="col-xs-4 col-sm-2 control-label">终止时间</label>
        <div class="col-xs-8 col-sm-9">
        <input type="text"  class="form-control" name="end_time" id="time_picker_end">
        </div>
      </div>

      <div class="form-group">
        <label for="class_selecte" class="col-xs-4 col-sm-2 control-label">导出条数</label>
        <div class="col-xs-8 col-sm-9">
        <input type="number"  class="form-control" name="limit" value="" placeholder="导出行数，要多少写多少，不写默认导出全部">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-xs-8 col-sm-9">
          <button type="submit" id="search" class="btn btn-lg btn-success">搜索</button>
          <button type="submit" id="download" class="btn btn-lg btn-primary" style="margin-left: 30px">下载</button>
        </div>
      </div>
    </form>

    <div class="table table-responsive table-condensed" style="margin-top:30px">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>经度</th>
            <th>纬度</th>
            <th class="wrap">地址名</th>
            <th>备注</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($list['list'] as $item): ?>
            <tr>
              <td><?php echo $item['id']; ?></td>
              <td><?php echo $item['lon']; ?></td>
              <td><?php echo $item['lat']; ?></td>
              <td title="<?php echo $item['address']; ?>">
                <div class="wrap">
                  <?php
if (mb_strlen($item['address']) > 20) {
    echo '...' . mb_substr($item['address'], -20);
} else {
    echo $item['address'];
}

?>

              </div>
              </td>
              <td title="<?php echo $item['remark']; ?>"><div><?php echo mb_substr($item['remark'], -15); ?></div></td>
              <td><?php echo $item['create_time']; ?></td>
            </tr>
          <?php endforeach;?>
        </tbody>
      </table>
      <?php echo $this->pagination->create_links(); ?>
    </div>
  </div>



</body>
</html>

这里写图片描述

SHUIPING_YANG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JeDate日历插件，年，年月，区间等自定义格式日历
03-01
jeDate日历整理合集，各种格式可选择，兼容火狐，谷歌，sarfari，ie10以上。你还在为不同需求的日历控件而担忧嘛，此合集包含所有需求需要的日历，不管是输入框的自定义等还是平板展示日历应有尽有，真是居家旅行，必备良药！！！
jeDate 日期控件
weixin_34194551的博客
04-16 342
写在前面的话： 最近在做一个日期范围的功能，研究了一个12306网站的日期范围选择，他用的是jcalendar.js,没有直接在日历插件里面做判断开始时间小于结束时间 而是自己在代码里面做了判断如下： 1 // 初始化页面的选择框 2 function initQueryInput(newStartDate,newEndDate) { 3 $('#que...
Calendars - 日历插件
coderidea
10-22 834
       Calendars - 日历插件         1)jQuery Frontier Calendar是一个可灵活定制的月日历jQuery插件，看起来类似于Google Calendar。当在一个日期单元格中有比较多的待办事项 时，将出现一个更多的链接，点击这个链接会弹一个jQuery模式对话框来显示所有的事务。这个日历还支持通过CSS文件改变整个日历的背景。 ...
多功能jQuery日期插件jeDate
10-11
jeDate是一款大众化的日期控件，除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。
JavaScript插件：快速选择日期----jedate日历插件
weixin_30725315的博客
03-04 361
jedate是一款轻量级JS库，可快速选择日期http://www.sucaijiayuan.com/Js/DateTime/1371.html 使用方法： 下载jedate ， 解压后不要改变文件夹内的目录结构，然后引入jedate.js文件， <input id="datepicker" placeholder="请选择时间" type="text" readonly/&gt...
jedate选择一年范围日期插件特效代码
03-20
【标题】"jedate选择一年范围日期插件特效代码"是针对网页中日期选择功能的一种优化解决方案，尤其适用于需要用户指定一年内特定日期范围的场景。这个插件基于jQuery库，并结合了jeDate插件的功能，提供了一种便捷的...
jedate选择一年范围日期插件
04-25
`jedate选择一年范围日期插件` 是一款专为网页设计者和开发者设计的JavaScript日期选择工具，它基于流行的jQuery库，并且利用jeDate插件进行扩展。这款插件的主要特点是允许用户在网页上快速选择一个时间段，特别是...
jedate选择一年范围日期插件.zip
11-11
《Jedate选择一年范围日期插件深度解析》 在当今的Web开发中，日期选择器已经成为不可或缺的组件，尤其在处理与时间相关的业务时。本文将深入探讨一款名为"Jedate选择一年范围日期插件"的工具，它为用户提供了一个...
jQuery日期时间范围选择插件.zip
07-11
在压缩包"jQuery日期时间范围选择插件"中，应该包含了daterangepicker.js脚本文件，以及可能的CSS样式表和示例HTML文件，帮助开发者快速集成和理解如何使用这个插件。 为了在项目中使用daterangepicker.js，开发者...
jQuery基于jeDate选择一年日期范围插件.zip
09-22
《jQuery基于jeDate选择一年日期范围插件详解》 在Web开发中，处理日期和时间是常见的需求之一，尤其在创建交互式用户界面时。jQuery作为JavaScript库的翘楚，提供了丰富的插件来简化此类任务。本文将深入探讨一款...
周日历选择插件jcalendar_week
09-04
之前在网上想找一个简单易用的周日历选择插件，发现这种前端周日历插件很少，而且很多文章写的周的算法都不是统一的，所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法：每周以周日为起始，第一周以每年第一个星期四所在的周为第一周（网上找的好像这个算法比较正规） 实现的效果是在手机端，也可以在PC端用，毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用周日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数：1.日期)(返回类名字符串，多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数：1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和周的DOM部分可选择并跳转到指定年份和周。 插件提供的方法： //获取周第一天方法weekfirstdate(),传入年份和周数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几周getweeknum(),传入年,月,日（注:这里的月份从0开始） console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定周confirmweek(),传入年份和周数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();
jquery.jedate.min.js
04-25
HTML时间组件(格式为：YYYY-MM-DD hh:mm:ss)，摘自于http://www.jemui.com/ 或 https://github.com/singod/jeDate
周选择插件jcalendarweek
11-15
一个基于jquery的周日历插件，支持选择并跳转到指定年份和周。 插件中周的算法：每周以周日为起始，以每年第一个星期四所在的周为年内第一周。
jquery日期控件jedate的学习
honcy_li的博客
06-26 2427
jedate 、juery
calendar.js多种形式日历插件
ICode联盟
09-01 1310
calendar.js是一款强大的日历插件，有多种形式的日历插件，比如，选择年、选择月、范围等。
jeDate日期控件
qq_41981324的博客
08-17 442
jeDate是一款原生JS开发的不依赖任何第三方库大众化的日期控件，它身兼多职，虽不是万能的，但是它却是功能强大多样的，它除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规...
Java Date时间格式处理
Tunny无人像你
08-22 654
  日期转字符串 /*import java.util.Date*/ Date date = new Date(); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String str = simpleDateFormat.format(date); System.out.pr...
Jcalendar 简单使用
daniel_ice的专栏
03-27 2950
<br />今天想找一个像js那样能在swing中使用的日历控件。找到jcalendar后，本想搜一下用法，哪知道google上全是提的问题，一下把我打蒙了，最后在才发现可能是太过于简单都没人回复了，本人弄了一个小例子。<br /> <br /> <br />package com.daniel.test; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import
推荐一款好用的日期控件jeDate
最新发布
分享DotNet技术和日常开发笔记，DotNet，Python为主。
03-15 628
jeDate6.5.0是一款原生JS开发的不依赖任何第三方库大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SHUIPING_YANG

你的鼓励是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值