bootstrap-datepicker實現年、月、日動態切換

阿新 • • 發佈：2019-02-20

效果圖：
這裡寫圖片描述

bootstrap-datepicker使用時，無法動態重置年、月、日控制元件，網上搜索了半天沒有找到相應的方法，後來自己根據jquery的特性通過動態增刪日期控制元件，實現年、月、日的無縫動態切換。

1.新建tet.html
引入bootstrap3-datepicker.css、bootstrap-datepicker.js等檔案

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>日期切換</title>
    <link 
 href="./bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="./css/test.css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <link href="./datapicker/css/bootstrap-datepicker3.css" rel="stylesheet" 
>
    <script src="./datapicker/js/bootstrap-datepicker.js"></script>
    <script src="./datapicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="./js/test.js"></script>
</head>
<body>
<span class="dayTest">按天</span>
<span class 
="monthTest">按月</span>
<span class="yearTest">按年</span>
<div class="form-group">
    <label class="form-group-title">日期範圍</label>
    <div class="input-group date">
        <input name="startDate" class="form-control date-picker form-control-left">
        <span class="input-group-addon"></span>
        <input name="endDate" class="form-control date-picker form-control-right">
    </div>
</div>
</body>
</html>

2.新建test.css

.dayTest {
    margin-left: 20px;
    text-align: center;
    background-color: red;
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.monthTest {
    text-align: center;
    background-color: red;
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.yearTest {
    text-align: center;
    background-color: red;
    width: 100px;
    height: 50px;
    font-size: 20px;
}

/*選擇日期範圍*/
.form-group {
    margin-left: 20px;
    margin-top: 0px;
    z-index: 5;
}

.form-group-title {
    float: left;
    display: block;
    z-index: 5;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: black;
}

.input-group {
    float: left;
    display: block;
    width: 300px;
    margin-left: 10px;
    z-index: 5;
}

.input-group .form-control-left {
    float: left;
    display: block;
    width: 100px;
    height: 25px;
    z-index: 5;
}

.input-group .input-group-addon {
    float: left;
    display: block;
    width: 10px;
    height: 25px;
    z-index: 5;
}

.input-group .form-control-right {
    float: left;
    display: block;
    width: 100px;
    height: 25px;
    margin-top: 0px;
    z-index: 5;
}

3.新建test.js

$(document).ready(function () {

    $('.date-picker').datepicker({
        minView: "day", //  選擇時間時，最小可以選擇到那層；預設是‘hour’也可用0表示
        language: 'zh-CN', // 語言
        autoclose: true, //  true:選擇時間後窗口自動關閉
        format: 'yyyy-mm-dd', // 文字框時間格式，設定為0,最後時間格式為2017-03-23 17:00:00
        todayBtn: true, // 如果此值為true 或 "linked"，則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。
        // 視窗可選時間從今天開始
        endDate: new Date()
    });

    $(".dayTest").click(function () {
        $(".date-picker").remove();
        $(".input-group-addon").remove();
        var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
        $(".input-group").append($leftInput);
        var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
        $(".input-group").append($inputGroupAddon);
        var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
        $(".input-group").append($rightInput);
        $('.date-picker').datepicker({
            minView: "day", //  選擇時間時，最小可以選擇到那層；預設是‘hour’也可用0表示
            language: 'zh-CN', // 語言
            autoclose: true, //  true:選擇時間後窗口自動關閉
            format: 'yyyy-mm-dd', // 文字框時間格式，設定為0,最後時間格式為2017-03-23 17:00:00
            todayBtn: true, // 如果此值為true 或 "linked"，則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。
            // 視窗可選時間從今天開始
            endDate: new Date()
        });
    });

    $(".monthTest").click(function () {
        $(".date-picker").remove();
        $(".input-group-addon").remove();
        var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
        $(".input-group").append($leftInput);
        var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
        $(".input-group").append($inputGroupAddon);
        var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
        $(".input-group").append($rightInput);
        $('.date-picker').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm",
            minViewMode: 1,
            endDate: new Date()
        });
    });

    $(".yearTest").click(function () {
        $(".date-picker").remove();
        $(".input-group-addon").remove();
        var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
        $(".input-group").append($leftInput);
        var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
        $(".input-group").append($inputGroupAddon);
        var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
        $(".input-group").append($rightInput);
        $(".date-picker").datepicker({
            language: "zh-CN",
            todayHighlight: true,
            format: 'yyyy-mm',
            autoclose: true,
            startView: 'years',
            maxViewMode:'years',
            minViewMode:'years',
            endDate: new Date()
        });
    });

})

bootstrap-datepicker實現年、月、日動態切換

效果圖： bootstrap-datepicker使用時，無法動態重置年、月、日控制元件，網上搜索了半天沒有找到相應的方法，後來自己根據jquery的特性通過動態增刪日期控制元件，實現年、月、日的無縫動態切換。 1.新建tet.html 引入boots

DatePicker隱藏年、月、日

datePicker = (DatePicker) inflate.findViewById(R.id.datepicker2); 1、隱藏年 ((ViewGroup) (((ViewGroup) datePicker .getChildAt(0)).getChi

關於datepicker只顯示年、月、日的設定

然後，直接上程式碼。如下是隻顯示月的sample code： $("#datepicker").datepicker({ language: "zh-CN", todayHighlight: true,

Pandas_實現數字順序填充、指定值交替填充、日期順序填充（按日、月、年）

set out 報錯 png date 讓我 div 增加技術 excel表的數據情況如下：下面數據區域的左邊和上邊都是空，這會導致我們讀取近pathon裏時，結構不是我們要的，需要用到skiprow和usecols來控制我們想要讀取的區域整合：

8.1 加減日、月、年

加減 val nth ear edate tno minus date bsp select hiredate - interval 5 day as hd_minus_5D, hiredate + interval 5 day as hd_

8.01 加減日、月、年

plus ear day sel emp nth min sele where select hiredate - interval 5 day as hd_minus_5D, hiredate + interval 5 day as hd_

vue自定義過濾器格式化時間為年、月、日、小時、分鐘、剛剛

color 進行 ges time log 格式化時間 lte seconds gets 首先需要在需要過濾的時間裏面添加一個過濾器我這裏需要過濾的是item.time 然後需要在item.time後面添加自定義過濾的名稱 date 接下來就是需要定

2017年10月17日-重新撿起的知識-字節、比特-計算機常識

code 沒有 its clas 存儲離職 2個 urn 什麽一、序畢業已經兩年了，曾經在學校學習的知識早已還給老師了，已經很久沒有好好學習了。雖然曾經也是高收入群體，但是因為從此再也不寫代碼了，覺得人生都沒有樂趣了，所以果斷離職了.....但是看著身邊

Python 按當前日期（年、月、日）創建多級目錄的方法

rsquo else 8.4 指定 ont nth pytho 日期想要先看實際效果，現在時間2018.4.26 使用python腳本按照年月日生成多級目錄，創建的目錄可以將系統生成的日誌文件放入其中，方便查閱，代碼如下： #!/usr/bin/

Struts2自定義轉換器輸入生日日期輸出年、月、日、年齡

BirthAction.java package com.action; import java.util.Calendar; import java.util.Map; import com.bean.Birth; import com.opensymphony.xwor

Java 處理日期年、月、日、周加減運算

1.java 日期加減運算 GregorianCalendar gc = new GregorianCalendar(); //java中對日期的加減操作 gc.add(1,-1);//表示年份減一. gc.add(2,-1);//表示月份減一. gc.add(3,-1);//表示周減一

2018年10月1日北京班全國中醫診療區域性雕塑美容、減肥無痕線雕提升術精品班

關於舉辦“全國中醫診療區域性雕塑美容、減肥無痕線雕提升術精品班”的通知各級有關醫療機構及從業醫師：目前中醫鍼灸美容養生、治病調理、減肥等技術風靡全球，效佳安全，符合現代人健康養生美容的理念；但由於很多從業者沒有真正掌握其精髓，而引發市場信任危機；為了進一步

輸入年份和天數，輸出對應的年、月、日

例：輸入格式：2000 61 輸出格式：2000-3-1 即2000年的第61天是3月1日 //使用指標作為函式引數返回多個函式值 #include <stdio.h> void month_day(int year,int yearda

定義一個結構體變數（包括年、月、日）。計算該日在本年中是第幾天，注意閏年問題。

#include <stdio.h> struct Date { int year; int month; int day; }; int main(){ struct Date p; scanf("%d %d %d", &p.year, &p.month, &p.d

mysql按自然年、月、日、季度、周查詢資料

limit_rule_record ：表名 create_time ：建立時間一、按自然年 SELECT * FROM limit_rule_record WHERE create_t

Anaconda安裝和使用Numpy、scipy、pandas、Scikit-learn（資料分析）（2018年12月28日）

1、Anaconda介紹安裝python的方法有很多種，資料分析方面比較常用Anaconda。Anaconda是一個開源的Python發行版本，其包含了conda、Python等多個科學包及其依賴項，也可以使用Miniconda這個較小的發行版，僅包含conda和 Python。Anacond

2018年8月6日筆記（迴圈結構、流程控制、陣列、記憶體初講）

複習： 1. 運算子算術： % - 取餘 - 注意結果的正負號 ++/--在變數之前需要先自增後運算；在變數之後先運算後自增；byte/short/char參與運算賦值：

20170923線上程式設計之輸入年、月、日輸出這是一年的第幾天

最近的一週的時間一直忙於現場筆試了，線上筆試也都沒怎做，真好今天收到了一個算是比較期待的offer吧，就不想出去跑了，留在酒店休息休息，突然發現今天我居然有5個筆試，索性就做吧，早上10:00-12:00是4399和獵豹的兩場筆試，只好每場筆試分差不多一半的時間了，

sql server取時間單獨取年、月、日

第一種： b.Date as IncomeDateYear, datename(year,b.Date) as IncomeDateYear,datename(month,b.Date) as IncomeDateYear,datename(day,b

MySQL中l獲取兩個時間的年、月、日、小時、分鐘、秒之差

MySQL中l獲取兩個時間的年之差： select timestampdiff(year, "2017-12-25 19:15:16","2018-12-25 23:55:16") as year_diff; +-----------+ | year_diff | +----------

bootstrap-datepicker實現年、月、日動態切換

相關推薦