当前位置: 首页 > news >正文

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

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

   一、插件地址
        地址为: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放入到对应的文件中

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


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

相关文章:

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

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

【WRF教程第3.2期】预处理系统 WPS详解:以4.5版本为例

预处理系统 WPS 详解:以4.5版本为例 WPS 嵌套域(WPS Nested Domains)USGS 和 MODIS 土地利用重力波拖拽方案静态数据(Gravity Wave Drag Scheme Static Data)1. 什么是重力波拖拽方案(GWDO)静态…...

深度学习的DataLoader是什么数据类型,为什么不可用来索引

在 Python 中,DataLoader是torch.utils.data.DataLoader类的实例对象,用于加载数据,它本身不是一种基本数据类型,而是一种特殊的迭代器类型,主要用于按批次加载数据,以下是其通常不可索引的原因&#xff1a…...

物理信息神经网络(PINN)八课时教案

物理信息神经网络(PINN)八课时教案 第一课:物理信息神经网络概述 1.1 PINN的定义与背景 物理信息神经网络(Physics-Informed Neural Networks,简称PINN)是一种将物理定律融入神经网络训练过程中的先进方…...

Linux setfacl 命令详解

文章目录 Linux setfacl 命令详解一、ACL 和 setfacl 简介二、基本语法三、常用操作1. 查看 ACL2. 为用户设置权限3. 为组设置权限4. 删除 ACL 条目5. 设置默认 ACL6. 递归设置 ACL 四、示例操作1. 创建示例目录和文件2. 设置 ACL3. 验证 ACL 五、注意事项六、总结 Linux setfa…...

电商环境下的财务ERP系统架构

先介绍一下自己的工作经历,2002年开始进入ERP实施行业,专注于O记EBS系统,正好赶上中国经济和信息化高度发展的阶段,先后实施过很多大国企和民企的大型ERP项目,在实施过程中逐渐对ERP系统的架构、模块设计有更深入的认识…...

Linux相关概念和易错知识点(25)(信号原理、操作系统的原理、volatile)

目录 1.信号的产生 (1)kill (2)raise、abort 2.对block、pending、handler表的管理 (1)信号集(sigset_t) (2)block表的管理 ①操作相关的函数 ②sigpr…...

线上问题——频繁 Full GC 问题的排查思路

文章目录 一、查看 GC 日志二、分析内存泄漏三、检查对象生命周期四、优化代码五、调整垃圾回收策略六、使用监控工具 一、查看 GC 日志 启用 GC 日志 在 Java 应用中,需要在启动参数中添加适当的参数来启用 GC 日志记录。可以使用-XX:PrintGCDetails、-XX:PrintGCD…...

《探秘 Qt Creator Manual 4.11.1》

《探秘 Qt Creator Manual 4.11.1》 一、Qt Creator 4.11.1 概述二、功能特性全解析(一)跨平台能力展示(二)代码编辑优势(三)版本控制集成(四)特定 Qt 功能呈现(五&#…...

level2逐笔委托查询接口

沪深逐笔委托队列查询 前置步骤 分配数据库服务器 查询模板 以下是沪深委托队列查询的请求模板&#xff1a; http://<数据库服务器>/sql?modeorder_book&code<股票代码>&offset<offset>&token<token>查询参数说明 参数名类型说明mo…...

在Linux系统安装配置 MySQL 和 hive,hive配置为远程模式

前提&#xff1a;已安装配置好了Hadoop环境&#xff0c;因为hive的底层是Hadoop 1 Mysql安装 搜索Centos7自带的mariadb rpm -qa|grep mariadb 卸载mariadb rpm -e mariadb-libs-5.5.64-1.el7.x86_64 --nodeps 再搜索一次看看是否还存在 rpm -qa|grep mariadb 安装mysql 创…...

如何写好一份科技报告

如何写好一份技术文档 一、科技报告写作的整体框架封面与摘要&#xff1a;引言&#xff1a;理论框架与文献综述&#xff1a;实验方法与材料&#xff1a;实验结果&#xff1a;结果分析与讨论&#xff1a;结论&#xff1a;参考文献&#xff1a;附录&#xff1a; 二、科技报告写作…...

ARM学习(38)多进程多线程之间的通信方式

ARM学习(38)ARM学习(38)多进程多线程之间的通信方式 一、问题背景 笔者在调试模拟器的时候,碰到进程间通信的问题,一个进程在等另外一个进程ready的时候,迟迟等不到,然后通过调试发现,另外一个进程变量已经变化了,但是当前进程变量没变化,需要了解进程间通信的方式…...

《图解机器学习》(杉山将著)第一部分绪论学习笔记

《图解机器学习》&#xff08;杉山将著&#xff09;第一部分绪论学习笔记 《图解机器学习》&#xff08;杉山将著&#xff09;第一部分绪论学习笔记一、什么是机器学习1.1 学习的种类1.2 机器学习任务的例子1.3 机器学习的方法 二、学习模型2.1 线性模型2.2 核模型2.3 层级模型…...

【WPF】RenderTargetBitmap的使用

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;RenderTargetBitmap 是一个非常有用的类&#xff0c;它允许你将任何可视元素&#xff08;如 UIElement 或 Visual 的实例&#xff09;渲染到位图中。这在需要生成图像快照、导出可视化内容为图片文…...

编辑, 抽成组件

问题 错误思路&#xff1a; 1 dept不能修改&#xff0c; 用watch监听一下&#xff1a;赋值给新的变量进行修改&#xff0c; 问题&#xff1a; currentDept 发生改变&#xff0c; depth也发生了改变&#xff0c;因为是浅拷贝&#xff0c; 用了json.pase(json.stringify(value…...

使用C#绘制具有平滑阴影颜色的曼德布洛特集分形

示例使用复数类在 C# 中轻松绘制曼德布洛特集分形解释了如何通过迭代方程绘制曼德布洛特集:...

【批量生成WORD和PDF文件】根据表格内容和模板文件批量创建word文件,一次性生成多个word文档和批量创建PDF文件

如何按照Word模板和表格的数据快速制作5000个word文档 &#xff1f; 在与客户的合作的中需要创建大量的合同&#xff0c;这些合同的模板大概都是一致的&#xff0c;是不是每次我们都需要填充不一样的数据来完成&#xff1f; 今天用表格数据完成合同模板的填充&#xff0c;批量…...

低延迟!实时处理!中软高科AI边缘服务器,解决边缘计算多样化需求!

根据相关统计&#xff0c;随着物联网的发展和5G技术的普及&#xff0c;到2025年&#xff0c;全球物联网设备连接数将达到1000亿&#xff0c;海量的计算数据使得传输到云端再处理的云计算方式显得更捉襟见肘。拥有低延迟、实时处理、可扩展性和更高安全性的边缘计算应运而生&…...

内旋风铣削知识再学习

最近被有不少小伙伴们问到蜗杆加工的一种方式——内旋风铣削加工。关于旋风铣之前出过一篇《什么是旋风铣&#xff1f;》&#xff0c;简要介绍了旋风铣&#xff08;Whilring&#xff09;的一些基本内容。本期再重新仔细聊一聊内旋风这种加工方式&#xff0c;可加工的零件种类&a…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...