日期区间选择器插件的操作流程

news2025/2/27 2:59:15

 我们知道,在开发过程中,为了能够在规定时间内完成项目,有时候我们都会使用插件来大大提高我们的开发效率,有些插件是可以直接拿来用,但是有些插件拿过来之后是需要进行修改,在使用插件的时候还有很多的注意事项,我们来看一下是如何获取到插件的

   一、插件地址
        地址为:jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)

   二、如何将插件从中获取出来 
       我这里用的是jQuery插件库,接下来我会随便找一个来给大家进行演示如何将插件获取出来。

       首先,我们找到我们对应的插件

      然后,点击进入到页面中,找到查看演示,不点立即下载的原因是因为要钱,有实力的可以买,我是没那个资金,

      点击查看演示进入到页面中我们发现有很多的选择器,这时候我们点击鼠标右键,会有一个查看页面源码,这里没有办法截屏,当我们进入到页面源码后,将代码进行复制到我们的编辑器中,

      然后我们打开网页,查看日历选择器

      我们可以发现这个插件的页面中有些不相关的东西,这时候我们可以打开F12控制台通过选择器,

      选中我们需要的那一部分,然后回到编辑器中将其余没用的代码进行删除。

      这是删除后的效果图 我们发现在编辑器中就连JS代码都删除完毕了还是会有很多,

      这是因为iframe框架路径的原因,现在我们只是用了他的路径来实现的日期选择器,当他那边发生改变的时候我们这边也会收到影响,所以下一步,我们将上面标记iframe框架中的地址进行复制在浏览器中打开

https://www.jq22.com/demo/pickerDateRange20150807

 当我们进到这个页面之后再次点击右键获取源码这才是真正能将我们想要的插件弄到手

 这才是获取到这页面的所有源码

 这时候我们再打开F12 去找到我们要用的插件

 我们将其余没用的代码进行一点点删除之后,只剩下我们要用的插件代码 

效果图如下

  接下来,我们将实现如何将插件引入到我们的页面中

  第一步:

      我们要先在页面中进行引入jQuery插件库,这里是jQuery插件下载的地方

https://code.jquery.com/jquery-3.7.1.js

第二步: 

      将插件中的HTML 放入到我们指定的地方

       将css样式放到我们对应的文件中

     然后将js放入到对应的文件中

 这样我们就将我们需要的插件引入到页面中啦!


      以上就是如何将一个插件引入到页面中的操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2264058.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

以ATTCK为例构建网络安全知识图

ATT&CK(Adversarial Tactics, Techniques, and Common Knowledge )是一个攻击行为知识库和模型,主要应用于评估攻防能力覆盖、APT情报分析、威胁狩猎及攻击模拟等领域。本文简单介绍ATT&CK相关的背景概念,并探讨通过ATT&a…

“年轻科技旗舰”爱玛A7 Plus正式发布,全国售价4999元

12月18日,备受行业瞩目的“A7上场 一路超神”爱玛旗舰新品发布会在爱玛台州智造工厂盛大举行。 作为年末“压轴产品”的“两轮豪华轿跑”爱玛A7Plus重磅上场,以“快、稳、帅、炫、智、爽”六大超神技惊艳四座,不仅践行了爱玛科技的精品战略&…

精通Redis(一)

目录 1.NoSQL 非关系型数据库 2.Redis 3.Redis的java客户端 4.Jedis 4.1Jedis快速入门 4.2Jedis连接池及使用 5.SpringDataRedis和RedisTemplate 1.NoSQL 非关系型数据库 基础篇-02.初始Redis-认识NoSQL_哔哩哔哩_bilibili NoSQL与SQL的区别就在于SQL是结构化的、关联…

研发效能DevOps: Vite 使用 Element Plus

目录 一、实验 1.环境 2.初始化前端项目 3.安装 vue-route 4.安装 pinia 5.安装 axios 6.安装 Element Plus 7.gitee创建工程 8. 配置路由映射 9.Vite 使用 Element Plus 二、问题 1.README.md 文档推送到gitee未自动换行 2.访问login页面显示空白 3.表单输入账户…

openbmc hwmon与sensor监控

1.说明 参考文档: https://github.com/openbmc/entity-manager/blob/master/docs/entity_manager_dbus_api.mdhttps://github.com/openbmc/entity-manager/blob/master/docs/my_first_sensors.md 1.1 简单介绍 注意: 本节是快速浏览整个sensor框架,了解大致open…

thinkphp框架diygw-ui-php进销存出库记录操作

将进销存的出库明细记录存储到数据库中,thinkphp框架diygw-ui-php后台通常涉及以下几个步骤: 数据库表定义 实现我们定义了三张表、一个产品表、出库订单表、出库订单产品明细表 生成API 进入DIY可视化API代码生成器,我们生成这三张表结应…

vertx idea快速使用

目录 1.官网下载项目 2.修改代码 2.1拷贝代码方式 为了能够快速使用,我另外创建一个新的maven项目,将下载项目的src文件和pom文件拷贝到新建的maven项目。 2.2删除.mvn方式 3.更新配置 4.配置application 5.idea启动项目 1.官网下载项目 从vert…

ComE(Community Embedding) -- 基于嵌入的社区检测优化算法

ComE(Community Embedding)是一种基于嵌入的社区检测优化算法。 它结合了节点嵌入技术与社区划分的目标,能够有效识别网络中的社区结构,并在社区划分过程中捕捉复杂的节点相互作用信息。 算法背景 传统的社区检测方法,…

CSS|14 z-index

z-index z-index表示谁压盖着谁,数值大的会压盖住数值小的。只有定位的元素才有z-index值,只有设置了固定定位、相对定位、绝对定位了的元素,才会拥有z-indexz-index的值是没有单位的,值是一个正整数,默认的z-index值…

重撸设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型:代理模式涉及的主要角色有:C 代码示例 定义 代理模式(Proxy Pattern)属于结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…

vue中验证码的实现方式

在写登录页的时候有的系统会让你也进行一下验证码绘制,那么验证码如何实现的呢?我在写登录页的时候通过将登录框,验证码分开页面来写,最后将它们变成标签来导入到我的样式页面中,这样写不仅方便,更容易修改…

Spring(三)-SpringWeb-概述、特点、搭建、运行流程、组件、接受请求、获取请求数据、特殊处理、拦截器

文章目录 一、SpringWeb概述 二、SpringWeb特点 三、搭建SpringWeb(在web项目中) 1、导包 2、在web.xml文件中配置统一拦截分发器 DispatcherServlet 3、开启 SpringWEB 注解 4、处理器搭建 四、SpringWeb运行流程 五、SpringWeb组件 1、前端控…

构建MacOS应用小白教程(打包 签名 公证 上架)

打包 在package.json中,dependencies会被打进 Electron 应用的包里,而devDependencies则不会,所以必要的依赖需要放到dependencies中。files中定义自己需要被打进 Electron 包里的文件。以下是一个完整的 mac electron-builder的配置文件。 …

2.4 网络概念(分层、TCP)

网络层与传输层概述 网络层: 抽象概念:网络层是基于 IP 的抽象概念,与数据链路层用 MAC 地址标记设备不同。MAC 地址是一种具体化的概念,绑定于所在的物理网络,而 IP 地址可以是固定的,也可以通过路由动态…

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…

基于前端技术UniApp和后端技术Node.js的电影购票系统

文章目录 摘要Abstruct第一章 绪论1.1 研究背景与意义1.2 国内外研究现状 第二章 需求分析2.1 功能需求分析2.2 非功能性需求分析 第二章系统设计3.1 系统架构设计3.1.1 总体架构3.1.2 技术选型 3.2 功能架构 第四章 系统实现4.1 用户端系统实现4.1.1 用户认证模块实现4.1.2 电…

大模型微调---Lora微调实战

目录 一、前言二、LoRA实战2.1、下载模型到本地2.2、加载模型与数据集2.3、处理数据2.4、LoRA微调2.5、训练参数配置2.6、开始训练 三、模型评估四、完整训练代码 一、前言 LoRA是一种参数高效的微调技术&#xff0c;通过低秩转换对大型语言模型进行适应性更新&#xff0c;减少…

centos7下docker 容器实现redis主从同步

1.下载redis 镜像 docker pull bitnami/redis2. 文件夹授权 此文件夹是 你自己映射到宿主机上的挂载目录 chmod 777 /app/rd13.创建docker网络 docker network create mynet4.运行docker 镜像 安装redis的master -e 是设置环境变量值 docker run -d -p 6379:6379 \ -v /a…

SLAAC如何工作?

SLAAC如何工作&#xff1f; IPv6无状态地址自动配置(SLAAC)-常见问题 - 苍然满关中 - 博客园 https://support.huawei.com/enterprise/zh/doc/EDOC1100323788?sectionj00shttps://www.zhihu.com/question/6691553243/answer/57023796400 主机在启动或接口UP后&#xff0c;发…

2024.12.21辩论赛感受

背景 今天辩论赛的双方论点是&#xff1a; 正方&#xff1a;寒假留在研发中心的收获大 反方&#xff1a;寒假去做其他事情的收获 辩论赛&#xff0c;为了锻炼自己&#xff0c;选择了不想选择以及相对不好辩论的反方。出现的状况有一下几点&#xff1a; 1.发现自己脑子完全跟不…