bootstrap-datetimepicker支持选择农历/阴历日期时间

主要参考了以下两篇文章来实现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 += "农历&nbsp;"+c.IMonthCn+c.IDayCn+"&nbsp;";
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;
}