js-年月日期选择工具

背景：

在工作中经常出现需要生成某个月的月报和年报，很少需要生成日报，但是我使用的框架下的年月日选择器不能单独选择月份，一定会选择到日。那么这个就比较鸡肋，那么我重新导入了个年月日的js包进去，就可以正常使用了。

详细内容：

这个js包的内容相对简单，并且外观大方，简易操作。可以控制显示只显示年，只显示月和只显示日。那么我把内容贴上。

 

使用月份选择器，默认时间格式为yyyy-MM

<input id="begintime" type="text" οnclick="setmonth(this)" readonly="readonly" />

使用日期选择器，默认时间格式为yyyy-MM-dd

<input id="endtime" type="text" οnfοcus="setday(this)" readonly="readonly" />

这里设置成只读，鼠标在输入框中点击，即可展现。

那么在js中，可以调整开始年月日。

使用日期选择器，一共提供五个参数，其中第一个参数是Object类型，指需要填入日期的元素对象；第二个参数是时间的格式，默认为yyyy-MM-dd；第三、四个参数分别为开始时间和结束时间；第五个参数是语言种类，这个1表示中文，0为英文（默认采用英文）

<input id="endtime" type="text" οnfοcus="setday(this,‘yyyy-MM-dd’,'2010-01-01','2010-12-30',1)" readonly="readonly" />

参数设置成 1 则显示中文。

 同理，使用月份，则就是

<input id="endtime" type="text" οnfοcus="setmonth(this,‘yyyy-MM-dd’,'2010-01-01','2010-12-30',1)" readonly="readonly" />

在js文件中，默认是到2020年，那么我们可以修改时间，让他延长至2100年。

那么以上就是关于这个js的简单用法。内容简单，使用方便，可以通过修改Js来设置默认格式，也可以通过传参数的形式设置。那么下面是该js的详细代码：

/**
 * add auto hide when mouse moveout
 * 
 * @version 1.0.1 
 * @date 2010-11-23
 * @author coraldane@gmail.com
*/

/**   
 * Date Picker
 * @param   inputObj  The input object want to contain date.
 * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM-dd", you could use your own defined format.
 * @param   beginDate Default value is 1990-01-01
 * @param   endDate   Default value is 2020-01-01
 * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
 */
function setday(inputObj,dateFormatStyle,beginDate,endDate,lang){
      
	if(null == inputObj){return null;}
	new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang).show();
}

/**   
 * Month Picker
 * @param   inputObj  The input object want to contain date.
 * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM", you could use your own defined format.
 * @param   beginDate Default value is 1990-01
 * @param   endDate   Default value is 2020-01
 * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
 */
function setmonth(inputObj,dateFormatStyle,beginDate,endDate,lang){
      
	if(null == inputObj){return null;}
	new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang,"m").show();
}

/**
Calendar Style
*/
Calendar.prototype.style = function(){
      
	var strStyle = "<style type='text/css'>";
	strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;background-color:#DBE7F2;}";
	strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}";
	strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}";
	strStyle += ".calendar .day li {height:20px;}";
	strStyle += ".calendar .day li,.calendar .date li{float:left;width:14.13%;height:20px;line-height:20px;text-align:center;}";
	strStyle += ".calendar .day li{font-weight:bold;} .calendar .date li{background-color:#EDF3F9;}";
	strStyle += ".calendar .month li{float:left;width:24.8%;height:20px;line-height:20px;text-align:center;background-color:#EDF3F9;}";
	strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
	strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#EDF3F9;}";
	strStyle += ".calendar .date li:hover, .calendar .month li:hover{cursor:pointer;color:#f30; text-decoration:none;background-color:#DBE7F2;}";
	strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}";
	strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}";
	strStyle += ".lastMonthDate