Bootstrap4使用gijgo的日期选择插件

Bootstrap4中居然没有带日期选择的控件,蜜汁尴尬,好在找到了gijgo这个插件,bootcdn上也有支持,记录一下用法

CDN地址

https://www.bootcdn.cn/gijgo/

效果演示

Bootstrap4使用gijgo的日期选择插件_第1张图片

代码

全部使用bootcdn上的引入,注意需要额外引入中文语言包,并在实例化datepicker对象的时候加入配置locale format weekStartDay分别表示语言 输出日期格式 每周第一天


<html lang="en">

<head>
    <title>Titletitle>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/gijgo/1.9.13/combined/css/gijgo.min.css" rel="stylesheet">
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">日期选择演示h4>
                        <p class="card-text">请选择日期p>
                        <input id="datepicker" class="col-12">
                    div>
                div>
            div>
        div>
    div>
    
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
    <script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper.min.js">script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">script>
    <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/gijgo.min.js">script>
    <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/messages/messages.zh-cn.min.js">script>
    <script>
        $("#datepicker").datepicker({
            locale: 'zh-cn',
            format: 'yyyy-mm-dd',
            weekStartDay: 1
        });
    script>
body>

html>

高级设置

限制可选日期范围(今天至未来5天)

<script>
    $("#datepicker").datepicker({
        locale: 'zh-cn',
        format: 'yyyy-mm-dd',
        weekStartDay: 1,
        minDate: function () {
            return new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
        },
        maxDate: function () {
            var date = new Date();
            date.setDate(date.getDate() + 5);
            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
        }
    });
script>

Bootstrap4使用gijgo的日期选择插件_第2张图片

你可能感兴趣的:(前端开发)