JS日历样式

最新推荐文章于 2024-05-17 14:54:19 发布

小張爱学习

最新推荐文章于 2024-05-17 14:54:19 发布

阅读量375

点赞数

分类专栏：笔记文章标签： jquery css javascript

本文链接：https://blog.csdn.net/a1770029/article/details/116479798

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS日历合集

文章目录

JS日历合集
前言
一、JS日历样式效果
二、使用步骤
- 1.日历1：
- 2.日历4：
总结
三、CS和JS下载

前言

对于网站上有很多js的日历样式，一个个寻找起来比较麻烦，对此我进行了一些规整

一、JS日历样式效果

日历1：

在这里插入图片描述

日历2：

在这里插入图片描述

日历3：

在这里插入图片描述

日历4：

在这里插入图片描述

二、使用步骤

1.日历1：

代码如下（示例）：

首先导入css和js（下载地址在本文最下面）
css：

<link rel="stylesheet" type="text/css" href="datedropper.css">
<link rel="stylesheet" type="text/css" href="timedropper.min.css">

js：

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script src="datedropper.min.js"></script>
<script src="timedropper.min.js"></script>

然后插入script

<script>
$("#pickdate").dateDropper({
	animate: false,
	format: 'Y-m-d',
	maxYear: '2020'
});
$("#picktime").timeDropper({
	meridians: false,
	format: 'HH:mm',
});
</script>

示例：

<link rel="stylesheet" type="text/css" href="datedropper.css">
<link rel="stylesheet" type="text/css" href="timedropper.min.css">
<div id="main">
	<div class="demo">
		<p>请选择日期：<input type="text" class="input" id="pickdate" /></p><br/>
		<p>请选择时间：<input type="text" class="input" id="picktime" /></p>
	</div>	
</div>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script src="datedropper.min.js"></script>
<script src="timedropper.min.js"></script><script>
$("#pickdate").dateDropper({
	animate: false,
	format: 'Y-m-d',
	maxYear: '2020'
});
$("#picktime").timeDropper({
	meridians: false,
	format: 'HH:mm',
});
</script>

2.日历4：

首先导入css和js（下载地址在本文最下面）
css：

<link rel="stylesheet" href="css/dateTime.css">

js：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dateTime.min.js"></script>

然后插入script

<script type="text/javascript">
$("#date").datetime({
	type:"date",
	value:[2019,9,31],
	success:function(res){
		console.log(res)
	}
})

$("#time").datetime({
	type:"time",
	value:[12,28]
})

$("#datetime").datetime({
	type:"datetime",
	value:[2019,7,15,15,30]
})
</script>

示例：

<link rel="stylesheet" href="css/dateTime.css">

</head>
<body>

<div class="mycontainer">
	<input type="text" placeholder="请选择日期" id="date">
	<input type="text" placeholder="请选择时间" id="time">
	<input type="text" placeholder="请选择日期和时间" id="datetime">
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dateTime.min.js"></script>
<script type="text/javascript">
$("#date").datetime({
	type:"date",
	value:[2019,9,31],
	success:function(res){
		console.log(res)
	}
})

$("#time").datetime({
	type:"time",
	value:[12,28]
})

$("#datetime").datetime({
	type:"datetime",
	value:[2019,7,15,15,30]
})
</script>
</div>
</body>

总结

（另外的几个日历样式有需要可质询本人）
这也是我摘抄规整的，如果有什么不懂的地方也可以质询本人

三、CS和JS下载

日历1百度网盘下载

日历4百度网盘下载

小張爱学习

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS日历样式

C#JS日历合集文章目录JS日历合集前言一、JS日历样式效果日历1：日历2：日历3：日历4：二、使用步骤1.日历1：2.日历4：总结三、CS和JS下载前言对于网站上有很多js的日历样式，一个个寻找起来比较麻烦，对此我进行了一些规整一、JS日历样式效果日历1：日历2：日历3：日历4：二、使用步骤1.日历1：代码如下（示例）：首先导入css和js（下载地址在本文最下面）css：<link rel="stylesheet" type="text/css" hr
复制链接

扫一扫

专栏目录