当前位置: 首页 > 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…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...