自定义datetimepicker日期控件

秒速五厘米 2022-01-13 03:05 368阅读 0赞

Bootstrap v3.3.5

css

/* ======================================== ys-datetimepicker ======================================== */
    .ys-datetimepicker{
        position:relative;
        width:100%;
        height:32px;
        cursor:pointer;
    }
    
    .ys-datetimepicker>input.form-control{
        width:100%;
        height:32px;
        background-color:#fff;
        border-radius: 0;
        cursor:pointer;
        border:1px solid #ccc;
        padding-left:10px;
    
    }
    .ys-datetimepicker:after{
        content:"";
        position:absolute;
        top:0;
        right:0;
        display:block;
        width:32px;
        height:32px;
        background: url(../../p_w_picpaths/common/ys-datetime-icon.png) no-repeat center center;
        background-size:20px 20px;
        border:1px solid #ccc;
    }
    
    .datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu .datetimepicker-minutes .minute.active,
    .datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu .datetimepicker-hours .hour.active,
    .datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu .datetimepicker-days .day.active,
    .datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu .datetimepicker-months .month.active,
    .datetimepicker.datetimepicker-dropdown-bottom-right.dropdown-menu .datetimepicker-years .year.active{
        background-p_w_picpath:none;
        background-color:#e64e4d;
    }

html

<div class="ys-datetimepicker">
        <input size="16" class="form-control" type="text" value="2015-10-01" readonly=""/>
    </div>

javascript

$(".ys-datetimepicker input").datetimepicker({
        language: "zh-CN",
        format:"yyyy-mm-dd",
        todayBtn:"linked",
        startView:2,
        minView:2,
        weekStart: 1,
        todayHighlight: 1,
        autoclose: 1,
        forceParse: 0
    });
    
    $(".ys-datetimepicker").on("click",function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).closest(".ys-datetimepicker").find("input").datetimepicker("show");
    });

转载于:https://blog.51cto.com/antlove/1786903