xgqfrms-GitHub commented 7 years ago

bootstrap-datetimepicker

bootstrap-datetimepicker-vs-jquery

xgqfrms-GitHub commented 7 years ago

/**
 * Simplified Chinese translation for bootstrap-datetimepicker
 * Yuan Cheung <advanimal@gmail.com>
 */
;(function($){
    $.fn.datetimepicker.dates['zh-CN'] = {
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: "今天",
            suffix: [],
            meridiem: ["上午", "下午"]
    };
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js" integrity="sha256-KWLvsoTXFF8o3o9zKOjUsYC/NPKjgYmUXbrxNk90F8k=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js" integrity="sha256-TWASWAmUUpOuGzyjla0gjARXqgItpvUAY28lcTe8w/g=" crossorigin="anonymous"></script>

xgqfrms-GitHub commented 7 years ago

bootstrap.datetimepicker.zh.js

https://stackoverflow.com/questions/13627308/add-st-nd-rd-and-th-ordinal-suffix-to-a-number/31615643

https://cdnjs.com/libraries/bootstrap-datetimepicker

xgqfrms-GitHub commented 7 years ago

https://github.com/xgqfrms/cdn/tree/gh-pages/datetimepicker

xgqfrms-GitHub commented 7 years ago

https://github.com/xgqfrms/cdn/tree/gh-pages/datetimepicker/

https://github.com/xgqfrms/cdn/blob/gh-pages/datetimepicker/bootstrap-datetimepicker.zh.js

https://github.com/xgqfrms/cdn/blob/gh-pages/datetimepicker/bootstrap-datetimepicker.min.js

xgqfrms-GitHub commented 7 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" integrity="sha256-ff4Vuur4aYrm0ZOAEC/me1LBOcid7PJ5oP9xxvJ0AKQ=" crossorigin="anonymous" />
</head>
<body>
    <div class="good-search search-detail">
        <div class="search-info search-time search-id fl-l" data-box="data-box">
            <label class="search-text" data-search="data-search">开始时间</label>
            <input class="search-input from-picker" data-timepicker="thisBegin"
                   data-format="yyyy-MM-dd" id="start_time" placeholder="开始时间" value="">
            <span>--</span>
            <label class="search-text" data-search="data-search">结束时间</label>
            <input class="search-input from-picker" data-timepicker="today"
                   data-format="yyyy-MM-dd" id="end_time" placeholder="结束时间">
        </div>
        <div class="search-info search-id fl-l">
            <button class="search-btn" id="good_search">搜索</button>
        </div>
    </div>
    <!-- js -->
    <script src="https://cdn.xgqfrms.xyz/jquery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.xgqfrms.xyz/datetimepicker/bootstrap-datetimepicker.zh.js"></script>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js" integrity="sha256-KWLvsoTXFF8o3o9zKOjUsYC/NPKjgYmUXbrxNk90F8k=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js" integrity="sha256-TWASWAmUUpOuGzyjla0gjARXqgItpvUAY28lcTe8w/g=" crossorigin="anonymous"></script> -->

    <!-- <script src="https://static.dd528.com/mall/bootstrap/3.3.6/js/bootstrap-datetimepicker.zh-CN.js"></script> -->
    <script>
        $('#start_time').datetimepicker(
            {
                // startDate: 'setStartDate',
                format: 'yyyy-mm-dd'
            }
        );
        $('#end_time').datetimepicker(
            {
                // startDate: 'setEndDate',
                format: 'yyyy-mm-dd'
            }
        );
        $( document ).ready(function() {
            (function(){
                let xxx = new Date().toISOString().substr(0,10),
                    abc = new Date().toISOString().substr(0,7),
                    yyy = document.querySelector('#start_time'),
                    zzz = document.querySelector('#end_time');
                yyy.value = abc + "-01";
                zzz.value = xxx;
            })();
        });
        $('#good_search').on('click', function(){
            let yyy = document.querySelector('#start_time').value,
                zzz = document.querySelector('#end_time').value;
            // alert();
            /*$('#start_time')[0].value;
            ===
            document.querySelector('#start_time').value;*/
            console.log('yyy.value =', yyy);
            console.log('zzz.value =', zzz);
            /*$.ajax(
                {
                    url: "https://fiddle.jshell.net/favicon.png",
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    }
                }
            ).done(function( data ) {
                if ( console && console.log ) {
                    console.log( "Sample of data:", data.slice( 0, 100 ) );
                }
            });*/
        });
        /*
        https://api.jquery.com/attr/#attr-attributeName-value
        https://api.jquery.com/attr/
        https://learn.jquery.com/using-jquery-core/document-ready/
        */
    </script>
    <!-- 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.css" />
     -->
</body>
</html>

https://cdn.xgqfrms.xyz/datetimepicker/bootstrap-datetimepicker.zh.js


<script src="https://cdn.xgqfrms.xyz/datetimepicker/bootstrap-datetimepicker.zh.js"></script>

xgqfrms-GitHub commented 7 years ago

DatePicker组件开发

http://www.imooc.com/video/14511

http://www.imooc.com/learn/36 -JavaScript入门篇 http://www.imooc.com/learn/10 -JavaScript进阶篇 http://www.imooc.com/learn/277 -JavaScript深入浅出 http://www.imooc.com/learn/488 -DOM探索之基础详解篇

xgqfrms / cdn

bootstrap-datetimepicker #10

bootstrap-datetimepicker

bootstrap.datetimepicker.zh.js

DatePicker组件开发