主要参考了以下两篇文章来实现bootstrap-datetimepicker插件支持选择农历日期:
bootstrap-datetimepicker添加支持显示农历节假日信息。_datetimepicker 农历-CSDN博客
1900年至2100年公历、农历互转Js代码 - 晶晶的博客
主要是根据文章一的方法指导进行改写,效果图:
步骤如下:
1. 文章二的农历日期展示信息比较符合本人要求,所以农历阳历互转使用了文章二的js(不用文章一的转换js),先把https://github.com/jjonline/calendar.js/blob/master/dist/js-calendar-converter.js 的js复制到空的bootstrap-datetimepicker.lunar.js文件下。仅支持1900-2100区间内的公历、农历互转。
2. 在自己原系统的bootstrap-datetimepicker.js插件基础上,找到bootstrap-datetimepicker.js中以下的fill方法复制出来在bootstrap-datetimepicker.lunar.js重写,
重写fill方法在bootstrap-datetimepicker.lunar.js显示为:
//重写fill函数
(function($){
$.fn.datetimepicker.Constructor.prototype.fill=function () {
//自己系统的bootstrap-datetimepicker.js的fill方法里的代码块改写
}
}(jQuery));
根据bootstrap-datetimepicker.lunar.js报错信息补全缺失的方法UTCDate(),把重写的fill方法代码块的变量dates改成可调用的$.fn.datetimepicker.dates,变量DPGlobal改成可调用的$.fn.datetimepicker.DPGlobal (实际更改根据所用版本bootstrap-datetimepicker.js来更改)
function UTCDate() {
return new Date(Date.UTC.apply(Date, arguments));
}
//重写fill函数
(function($){
$.fn.datetimepicker.Constructor.prototype.fill=function () {
//自己系统的bootstrap-datetimepicker.js的fill方法里的代码块改写
}
}(jQuery));
3. 然后在重写方法中把插件原来渲染日期的地方加上农历信息的显示,
//原来日期时间显示的渲染代码
//html.push('<td class="day' + clsName + '">' + prevMonth.getUTCDate() + '</td>');
//加上农历时间的渲染代码
//获取当前时间详细信息包括节日信息 文章二的农历转换方法
var c= calendar.solar2lunar(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth()+1, prevMonth.getUTCDate());
var ct = "";
ct += "农历 "+c.IMonthCn+c.IDayCn+" ";
c.festival ? ct += c.festival : ct += "";
c.lunarFestival ? ct += c.lunarFestival : ct += ""
var lunarTxt = c.IDayCn ? c.IDayCn : "";
if(c.festival){
lunarTxt = c.festival;
}
if(c.lunarFestival){
lunarTxt = c.lunarFestival;
}
//24节气
if(c.Term){
lunarTxt = c.Term;
}
html.push('<td class="day' + clsName + '">' + prevMonth.getUTCDate() + '<br><p title=' + ct + '>' + lunarTxt + '</p></td>');
4. 在需要调用农历日期的页面引入bootstrap-datetimepicker.lunar.css和bootstrap-datetimepicker.lunar3.js 。
bootstrap-datetimepicker.lunar.css:(在文章一的基础上具体根据自己系统样式改写)
.datetimepicker .table-condensed>tbody>tr>td{
padding: 1px;
}
.datetimepicker table tr td.active p{
color: #fff;
}
.datetimepicker table tr td p{
font-size: 12px;
margin-top: -4px;
padding-bottom: 2px;
line-height: normal;
}
.datetimepicker td,
.datetimepicker th {
width: 50px;
}
.datetimepicker table tr td.old p,
.datetimepicker table tr td.new p{
color: #999999;
}
5. 根据选择的新历或者农历日期类型,输入框显示对应的新历或者农历日期,用了两个输入框:一个是绑定了bootstrap-datetimepicker插件方法的输入框A,一个是单纯用来展示新历日期或者农历日期值的输入框B(B的值由日期类型和A的值决定,使用css绝对定位方法和z-index属性B覆盖了A,A与B位置完全一样重叠在一起)。B绑定focus事件,聚焦时显示日期时间选择器。实现相关代码如下,根据自己的实际情况更改。
html:
<div class="form-group">
<label class="col-sm-4 text-right" style="max-width: 150px;">生日</label>
<div class="col-sm-8 clearfix">
<div class="pull-left" style="width: 30%;">
<select class="form-control" id="c_birthdaytype">
<option value="1">新历</option>
<option value="2">农历</option>
</select>
</div>
<div class="pull-left" style="width: 70%;position: relative;">
<input type="text" class="form-control c_form_datetime" id="c_birthdayortime" autocomplete="off" style="position: absolute;left: 0;z-index: 1;">
<input type="text" class="form-control c_form_datetime_btn" id="c_birthday" autocomplete="off" style="position: absolute;left: 0;z-index: 10;">
</div>
</div>
</div>
Js:
$(function () {
//输入框B聚焦focus事件:显示日期时间插件
$(".c_form_datetime_btn").focus(function(){
$("#c_birthdayortime").datetimepicker("show");
});
$(".c_form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy/mm/dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
showMeridian: 0,
minView: 'month',
pickerPosition: "top-right"
}).on('changeDate', function(ev){
var calendarType = $("#c_birthdaytype").val();
//如果选择新历,输入框B则直接显示输入框A的值
var dateTxt = $("#c_birthdayortime").val();
//如果选择农历类型,则用文章二的js把时间转换成农历,显示在输入框B中
if(calendarType == 2 && !isEmpty(ev.date)){
var d = new Date(ev.date),
year = d.getFullYear(),
month = d.getMonth() + 1,
dayMonth = d.getDate();
var lunar = calendar.solar2lunar(year, month, dayMonth);
if(lunar != -1){
dateTxt = lunar.lYear + '年' +lunar.IMonthCn + lunar.IDayCn;
}
}
$("#c_birthday").val(dateTxt);
//隐藏日期时间插件
$("#c_birthdayortime").datetimepicker("hide");
})
//更换日期类型清空日期
$("#c_birthdaytype").change(function(){
$("#c_birthday").val("");
$("#c_birthdayortime").val("");
});
});
//判断字符串是否为空值
function isEmpty(value) {
if (typeof (value) == 'undefined' || value == null || value == "null" || value == undefined || value == "undefined" || value === '') {
return true;
}
return false;
}