JavaScript-自制日历控件(只选择年月)
<style>
*{margin: 0px; padding: 0px;}
</style>
<input type="text" name="year" onclick="Canlender.getYear($(this))" />
<input type="text" name="year" onclick="Canlender.getMonth($(this))" />
<script src="jquery.js"></script>
<script>
var Canlender = new Object();
Canlender.years = new Array();
Canlender.yearIndex = new Array();
Canlender.months = new Array();
Canlender.date = new Date();
Canlender.year = Canlender.date.getFullYear();
Canlender.page = 0;
Canlender.pageNum = 12;
Canlender.startYear = 2000; var i, j;
for (i = Canlender.startYear, j = 0; i <= Canlender.year; ++i, ++j) {
Canlender.years[j] = i;
Canlender.yearIndex[i] = j;
}
for (i = 1, j = 0; i <= 12; ++i, ++j) {
Canlender.months[j] = i;
} Canlender.getYearTds = function(goPage) {
if (typeof(goPage) == 'undefined') {
goPage = Math.ceil((Canlender.yearIndex[Canlender.year] + 1) / Canlender.pageNum);
} var totalPage = Math.ceil(Canlender.years.length / Canlender.pageNum); goPage = goPage > totalPage ? totalPage : goPage;
goPage = goPage <= 0 ? 1 : goPage; Canlender.page = goPage; var startIndex = (goPage - 1) * Canlender.pageNum;
var endIndex = startIndex + Canlender.pageNum - 1; endIndex = endIndex > Canlender.yearIndex[Canlender.year] ? Canlender.yearIndex[Canlender.year] : endIndex; var rtn = '';
var counter = 0;
var addtr = false;
for (i = startIndex; i <= endIndex; ++i) {
if (counter % 4 == 0) {
rtn += '<tr>';
}
rtn += '<td width="25%">';
rtn += '<span style="cursor: pointer; font-size: 12px;" onclick="Canlender.sender.val($(this).html()); Canlender.yearBox.css(\'display\', \'none\');">' + Canlender.years[i] + '</span>';
rtn += '</td>'; ++counter;
if (counter % 4 == 0) {
rtn += '</tr>';
}
} while (counter % 4 != 0) {
rtn += '<td width="25%"> </td>';
++counter;
if (counter % 4 == 0) {
rtn += '</tr>';
}
} if ($('#calenderYear').length > 0) {
$('#calenderYear').html(rtn);
} else {
return rtn;
}
} Canlender.getMonthTds = function() {
var rtn = '';
var counter = 0;
for (i = 1; i <= 12; ++i) {
if (counter % 4 == 0) {
rtn += '<tr>';
}
rtn += '<td width="25%">';
v = i;
if (i < 10) {
v = '0' + v;
}
rtn += '<span style="cursor: pointer; font-size: 12px;" onclick="Canlender.sender.val($(this).html()); Canlender.monthBox.css(\'display\', \'none\');">' + v+ '</span>';
rtn += '</td>'; ++counter;
if (counter % 4 == 0) {
rtn += '</tr>';
}
}
return rtn;
} Canlender.getYear = function(sender) {
Canlender.sender = sender;
if (Canlender.yearBox) {
Canlender.yearBox.css('display', 'block');
} else {
var pages = Canlender.getYearTds();
var pos = sender.position();
var left = pos.left;
var top = pos.top + sender.height();
var str = '<div style="width: 160px; border: 1px solid black; padding: 2px; position: absolute; z-index:999; top: ' + top + 'px; left: ' + left + '" id="calenderYearId">';
str += '<div style="background: black; color: white; font-size: 12px; line-height:16px; height: 16px; text-align: center;">';
str += '<span onclick="Canlender.getYearTds(' + (Canlender.page - 1) + ')" style="padding-right: 20px; cursor: pointer;"><<</span>';
str += '<span>请选择年份</span>';
str += '<span onclick="Canlender.getYearTds(' + (Canlender.page + 1) + ')" style="padding-left: 20px; cursor: pointer;">>></span>';
str += '</div>';
str += '<div style="padding: 2px 0px;"><table width="160px" border=0 id="calenderYear">';
str += pages;
str += '</table></div>';
str += '<div style="padding: 2px; text-align:center;"><span style="color: black; cursor: pointer; font-size:12px;" onclick="Canlender.yearBox.css(\'display\', \'none\')">关闭</span></div>';
str += '</div>';
Canlender.yearBox = $(str);
sender.after(Canlender.yearBox);
}
} Canlender.getMonth = function(sender) {
Canlender.sender = sender;
if (Canlender.monthBox) {
Canlender.monthBox.css('display', 'block');
} else {
var pages = Canlender.getMonthTds();
var pos = sender.offset();
var left = pos.left;
var top = pos.top;
var str = '<div style="width: 160px; border: 1px solid black; padding: 2px; position: relative; top: ' + top + 'px; left: ' + left + '" id="calenderMonthId">';
str += '<div style="background: black; color: white; font-size: 12px; line-height:16px; height: 16px; text-align: center;">';
str += '<span>请选择月份</span>';
str += '</div>';
str += '<div style="padding: 2px 0px;"><table width="160px" border=0 id="calenderMonth">';
str += pages;
str += '</table></div>';
str += '<div style="padding: 2px; text-align:center;"><span style="color: black; cursor: pointer; font-size:12px;" onclick="Canlender.monthBox.css(\'display\', \'none\')">关闭</span></div>';
str += '</div>';
Canlender.monthBox = $(str);
sender.after(Canlender.monthBox);
}
}
</script>
可以自己改样式..
JavaScript-自制日历控件(只选择年月)的更多相关文章
- vue日历控件,自定义选择年月 选择年月日 选择年月日时 选择年月日时分,自定义日期范围
下载地址:https://pan.baidu.com/s/1iEZl4kDkEg4ybwqc7aI7vQ 注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/ ...
- bootstrap的datetimepicker控件只选择年月的配置
<script src="{% static "jquery/jquery-1.11.3.min.js" %}"></script> & ...
- javaScript实现日历控件
近期学习js.闲来无事就写了个简单的日历控件.不知道别人是怎么实现的.纯粹自己想法写的, 写的不好 ,但能够起到抛砖引玉的作用. 先来看效果. watermark/2/text/aHR0cDovL2J ...
- zui框架配置日期控件只显示年月
zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...
- ExtJs4.0日期控件只显示年月按年月格式会跳月的解决办法
如果是Ext.form.panel的话,只要设置一下属性就可以.如下代码: { text : '期间', width : 80, sortable : true, dataIndex : 'accou ...
- WPF DatePicker日期控件只显示年月
1.需要引用2个类,第一个类DatePickerCalendar public class DatePickerCalendar { public static readonly Dependency ...
- layui日历控件设置选择日期不能超过当前日期
layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...
- mvc 日历控件
第二个是日历控件,在网上查了一个普通的日历控件,也生成了下拉的日历样子,但是一些脚本比如选择年月,需要一些时间,最后只好套用了My97 DatePicker,这样以来其实简单多了. 第一步:下载 My ...
- WdatePicker日历控件动态设置属性参数值
首先吐槽一下需求人员给了我一个很坑的需求:WdatePicker日历控件里面选择的最小时间(minDate)的值是级联动态改变的,而且这个值要从数据库获取,这样子只能使用 ajax 来发起请求获取mi ...
随机推荐
- error: conflicting type qualifiers for 'xxxxx'
网上的非常多解释--非常难理解-- 情景描写叙述: 在代码中,写了A\B两个文件,A:是.c文件,B是.h文件和.c文件. 在A中包括了B.h文件. 在B.h文件里声明了A中定义的变量. 这样编译的情 ...
- [Linux] Linux 守护进程的启动方法
reference : http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html "守护进程"(daemon)就是一直在后台 ...
- 让Mac风扇面对PD不再疯狂
对于所有喜欢Mac操作系统的用户来说,如果办公环境必须使用Windows及Windows程序,那一定会非常崩溃,因为你很可能使用了Parallels Desktop来运行你的Windows虚拟机,那么 ...
- FLume监控文件夹,将数据发送给Kafka以及HDFS的配置文件详解
详细配置文件flume-conf.properties如下: ############################################ # producer config ###### ...
- GUI程序设计
1. 对话框(JDialog)使用示例 例1. JDialog简单使用示例. import javax.swing.JLabel; public class demoJDialog { JFrame ...
- Oracle中的日期处理方法
日期处理方法 当前日期和时间 Select sysdate from dual; 本月最后 ...
- zypper命令使用示例
导读 Zypper是OpenSUSE和企业版SUSE中软件包管理器ZYpp的命令行接口. 主要用于:1.管理软件包:zypper可用来安装.删除.更新和查询本地或远程的软件包.2.管理仓库:zyppe ...
- https://leetcode-cn.com/
https://leetcode-cn.com/ 码,马不停蹄,码不停题 英文版:https://leetcode.com/
- 九度OJ 打印日期 (模拟)
题目1186:打印日期 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4284 解决:1483 题目描写叙述: 给出年分m和一年中的第n天,算出第n天是几月几号. 输入: 输入包含两个整数 ...
- Android直播实现 Android端推流、播放
最近想实现一个Android直播,但是对于这方面的资料都比较零碎,一开始是打算用ffmpeg来实现编码推流,在搜集资料期间,找到了几个强大的开源库,直接避免了jni的代码,集成后只用少量的java代码 ...