自定义时间组件

最新推荐文章于 2024-08-07 02:52:26 发布

dpc5517

最新推荐文章于 2024-08-07 02:52:26 发布

阅读量256

点赞数

分类专栏： html、js 文章标签： html js

本文链接：https://blog.csdn.net/DPCljw/article/details/104612128

版权

html、js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、（运行文件在我的资源中）
注意事项：
①、导包，
②、在 script 中绑定方法加载时间组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS-->
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./css/date/bootstrap-datetimepicker.css">

    <title>index</title>

    <script src="./js/bootstrap.js" type="text/javascript"></script>
    <script src="./js/ajax-1-1.js" type="text/javascript"></script>

    <script type="text/javascript" src="./js/date/bootstrap-datepicker.min.js"></script>

    <!-- Javascripts-->
    <script src="./js/jquery.min.js" type="text/javascript"></script>

    <!--时间组件-->
    <script src="./js/date/currency.min.js"></script>
    <script src="./js/date/moment.min.js"></script>
    <script src="./js/date/datepicker.all.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/date/datepicker.min.css">

    <script src="./js/date/validate.js"></script>

</head>
<body onload="loadData()">

<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day">
    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
    <input type="text" id="birthday"
           autocomplete="off" name="birthday"
           placeholder="选择日期"
           class=" c-datepicker-data-input form-control"
           value="" autocomplete="off">
</div>

</body>

<script>

    function loadData() {
        //年月日单个
        $('.J-datepicker-day').datePicker({
            hasShortcut: false,
            format: 'YYYY-MM-DD'
        });
       var birthday= $("#birthday").val()
        console.log(birthday)
    }
</script>
</html>