分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

【jquery】多日期选择插件easyui date

发布时间:2023-09-06 02:03责任编辑:赖小花关键词:easyui

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="width: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

【jquery】多日期选择插件easyui date

原文地址:https://www.cnblogs.com/xuzhengzong/p/9293510.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved