Bootstrap datetimepicker date plug-in beautification effect (code)-JS Tutorial-php.cn

The content of this article is about the beautification effect (code) of the bootstrap datetimepicker date plug-in. It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirements:

(1) The date panel is expanded by default

(2) Additional information can be processed based on the clicked date, such as recording some on this day Information, etc.

The date panel of most date plug-ins is hidden. When the input is clicked, the date panel is displayed. If the datetimepicker date plug-in based on bootstrap is instantiating the plug-in on the p element, the panel is displayed. On the input panel the panel is hidden. I feel that this plug-in is not very beautiful. The default style is as follows:

Bootstrap datetimepicker date plug-in beautification effect (code)

Now we change the style to the following

Bootstrap datetimepicker date plug-in beautification effect (code)

Complete code

html

<div>
    <div></div>
    <div>
        <div>
<span></span> <span>星期一</span>
</div>
        <div></div>
        <ul>
            <li>上午9:30 开销售会议</li>
            <li>上午10:30 学习业务知识</li>
            <li>上午11:30 整理合同</li>
            <li>
                <input>
            </li>
        </ul>
        <div>
            <button>增加</button>
            <button>保存</button>
        </div>
    </div>
</div>

Copy after login

css

 .calendar {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
        font-family: "微软雅黑";
        font-size: 16px;
        background:#fffbef;
        border:1px solid #d6c5bd;
        border-radius:4px
    }
.datetimepicker{padding:5px 15px 15px;}
.form-control{border-radius:4px;}
    .tfoot {
        display: none;
    }

    .calendar .form_date {
        width: 70%;
        float: left;
        background: #fffbef;
    }

    .datetimepicker-inline {
        width: 100%;
    }

    .datetimepicker-inline table {
        width: 100%;
    }

    .datetimepicker-inline table tbody tr,
    .datetimepicker-inline table thead tr {
        height: 50px;
    }

    .datetimepicker-inline table tr td {
        border: 1px solid #ddd;
    }

    .datetimepicker-inline table thead tr:first-child {
        border-bottom: 1px solid #ccc;
    }

    .datetimepicker table tr td.old,
    .datetimepicker table tr td.new {
        pointer-events: none;
    }

    .datetimepicker table tr td.today,
    .datetimepicker table tr td.today:hover,
    .datetimepicker table tr td.today.disabled,
    .datetimepicker table tr td.today.disabled:hover {
        background: #fc9348;
    }

    .datetimepicker table tr td.today.active,
    .datetimepicker table tr td.today.active:hover,
    .datetimepicker table tr td.today.active:focus,
    .datetimepicker table tr td.today {
        background: #fc9348;
        color: #fff
    }

    .datetimepicker table tr td.today:hover,
    .datetimepicker table tr td.today:hover:hover {
        background: #fc9348;
        color: #fff
    }

    .datetimepicker table tr td.active:active,
    .datetimepicker table tr td.active:hover:active,
    .datetimepicker table tr td.active.disabled:active,
    .datetimepicker table tr td.active.disabled:hover:active,
    .datetimepicker table tr td.active.active,
    .datetimepicker table tr td.active:hover.active,
    .datetimepicker table tr td.active.disabled.active,
    .datetimepicker table tr td.active.disabled:hover.active {
        background: #00ada7;
    }

    .calendar .calendarInfor {
        width: 30%;
        height: 423px;
        background:#ff9161;
        float: right;
    }
    .calendarInfor{padding:15px;position:relative;}
    .calendarInfor_title{color:#fff;height:40px;line-height:40px;background:#fe7e46;border-bottom:2px solid #df6e3c;border-radius:5px;padding:0px 15px;margin-bottom:30px;}
    .calendarInfor_content{height:202px;overflow:auto;color:#fff;border:1px solid #ffccb6;padding:10px 15px;border-radius:5px;margin-bottom:25px;}
    .calendarInfor_content li{height:40px;line-height:40px;border-bottom:1px solid #ffb08d;}
    .calendarBtn{position:absolute;bottom:30px;left:15px;right:15px;}
    .calendarBtn .btn-add{border-color:#fdbc9f;background:#fcaf60;color:#fff;outline:none;box-shadow:none;}
    .calendarBtn .btn-add:focus:active{color:#fff;border-color:#fdbc9f;background:#fcaf60;outline:0;box-shadow:inset 0 1px 5px rgba(0,0,0,.05);}
    .calendarBtn .btn-add:hover{background:#fdb66d;}
    .calendarBtn .btn-save{border-color:#e65769;background:#f76375;color:#fff;outline:none;box-shadow:none;}
    .calendarBtn .btn-save:focus:active{color:#fff;border-color:#e65769;background:#f76375;outline:0;box-shadow:inset 0 1px 5px rgba(0,0,0,.05);}
    .calendarBtn .btn-save:hover{background:#ee6172;}
    .add_input{box-shadow:none;border:1px solid #fff}
    .add_input:focus{box-shadow:none;border-color:#fee3bf;}

Copy after login

$(document).ready(function() {
        //初始化时间
        var myDate = new Date();
        getWeek(myDate, 1);
        //option设置
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            locale: "hu", 
            dayViewHeaderFormat: "YYYY. MMMM",
            format: "YYYY.MM.DD. dddd - hh:mm:ss a",
            weekStart: 1,
            //todayBtn:  1,
            //autoclose: 1,
            todayHighlight: 1,
            startView: 2, //需要，否则点击会显示小时
            minView: 2,
            //forceParse: 0
        });

        function getWeek(date, label) {
            var Y = date.getFullYear();
            var M = date.getMonth() + 1;
            var D = date.getDate();
            var W;
            var fullTime;
            var w = date.getDay();
            switch (w) {
                case 1:
                    W = "星期一";
                    break;
                case 2:
                    W = "星期二";
                    break;
                case 3:
                    W = "星期三";
                    break;
                case 4:
                    W = "星期四";
                    break;
                case 5:
                    W = "星期五";
                    break;
                case 6:
                    W = "星期六";
                    break;
                case 0:
                    W = "星期天";
                    break
            }
            if (label == 1) {
                fullTime = Y + "年" + M + "月" + D + "日";
                $(".time").html(fullTime);
                $(".week").html(W);
            } else if (label == 2) {
                fullTime = Y + "年" + M + "月";
                $(".time").html(fullTime);
                $(".week").html("");
            } else if (label == 3) {
                M = M + 1;
                fullTime = Y + "年" + M + "月";
                $(".time").html(fullTime);
                $(".week").html("");
            } else {
                Y = Y + 1;
                fullTime = Y + "年"
                $(".time").html(fullTime);
                $(".week").html("");
            }

        }
        $('.form_date').datetimepicker().on("changeDate", function(ev) {
            getWeek(ev.date, 1);
        })
        $('.form_date').datetimepicker().on("changeMonth", function(ev) {
            getWeek(ev.date, 2);
        })
        $("#add").click(function() {
            var inputText = $("

Copy after login

").html('') $(".calendarInfor_content").append(inputText); }) function getTitleMonthTime() { var content = $(".datetimepicker-days .switch").html(); content = content.split(" ").reverse(); content[0] = content[0] + "年"; content.join(" "); $(".time").html(content); $(".week").html(""); } function getTitleYearTime() { var content = $(".datetimepicker-months .switch").html(); content = content + "年" $(".time").html(content); $(".week").html(""); } $(".datetimepicker-days .next").click(function() { setTimeout(getTitleMonthTime, 200) }) $(".datetimepicker-days .prev").click(function() { setTimeout(getTitleMonthTime, 200) }) $(".datetimepicker-months .next").click(function() { setTimeout(getTitleYearTime, 200) }) $(".datetimepicker-months .prev").click(function() { setTimeout(getTitleYearTime, 200) }) })This article ends here For more bootstrap content, you can pay attention to the bootstrap tutorial column on the php Chinese website! ! !

The above is the detailed content of Bootstrap datetimepicker date plug-in beautification effect (code). For more information, please follow other related articles on the PHP Chinese website!