elementUI 2個輸入框時間區間月份選擇

-Advertisement-

實現效果: ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="reportApp">
    <template>
        <el-form>
            <el-row>
                <el-col :spna="12">
                    <el-form-item label="開始時間" size="mini">
                        <el-date-picker
                                v-model="startDate"
                                format="yyyy-MM"
                                type="month"
                                placeholder="選擇月份"
                                :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :spna="12">
                    <el-form-item label="結束時間" size="mini">
                        <el-date-picker
                                v-model="endDate"
                                format="yyyy-MM"
                                type="month"
                                placeholder="選擇月份"
                                :picker-options="pickerOptions2">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </template>
</div>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var vm = new Vue({
        el: "#reportApp",
        data: function () {
            return {
                startDate: '',
                endDate: '',
                pickerOptions1: {
                    disabledDate(time) {
                        if (vm.endDate != null && vm.endDate != "") {
                            return time.getTime() > vm.endDate;
                        } else {
                            return false;
                        }
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        if (vm.startDate != null && vm.startDate != "") {
                            return time.getTime() < vm.startDate;
                        } else {
                            return false;
                        }
                    }
                }
            }
        }
    })
</script>
</body>
</html>

實現效果:

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

linux上安裝mysql5.7

一、清理老的mysql （1）卸載已有的mysql 查找以前是否裝有mysql命令： 1 rpm -qa|grep -i mysql 停止mysql服務，卸載之前安裝的mysql 1 rpm -ev 包名如果卸載過程中報依賴錯誤，直接在卸載命名後面加參數 --nodeps 1 rpm -ev 包名 ...
聯合查詢(姑且稱之為聯合查詢)的最差解

1.數據如下 TimePoint | PollutantCode | StatusName | Value | | | 2019 03 16 01:00:00.000|PM10|大氣溫度|11.096 2019 03 16 01:00:00.000|PM10|大氣壓力|102.354 2019 03 ...
Kudu建表語句

--建表CREATE TABLE kudu_testdb.perf_test_t1( id string ENCODING PLAIN_ENCODING COMPRESSION SNAPPY, int_value int, bigint_value bigint, timestamp_value t ...
ES 20 - 查詢Elasticsearch中的數據 (基於DSL的查詢, 包括validate、match、bool)

本文介紹Elasticsearch的DSL(領域特定語言)的使用, 包括validate、match query、bool query等的使用方法, 詳細而且都有使用示例~ 歡迎交流呀(⊙ o ⊙) ...
mysql 組合兩張表

select P.FirstName,P.Lastname,A.City,A.State from Person P left join Address A on P.PersonId = A.PersonId; ...
如果下載老版本的Xcode

打開：https://developer.apple.com/download/more/，選擇符合自己的Xcode版本即可。 ...
個人app如何收集用戶日誌

版權聲明：本文為xing_star原創文章，轉載請註明出處！本文同步自http://javaexception.com/archives/147 個人app如何收集用戶日誌，相信不少人對這個話題感興趣，本文將結合自己的實際經歷，分享下自己的做法。用郵件收集用戶上報日誌在上篇文章http://j ...
海思Hi3798MV310機頂盒晶元Datasheet-基本信息

Hi3798M V310 是用於 IPTV/OTT 機頂盒市場的支持 4KP60 解碼的超高清高性能 SOC晶元。集成 4 核 64 位高性能 Cortex A53 處理器和多核高性能 2D/3D 加速引擎；支持H.265/AVS2 4Kx2K@P60 10bit 超高清視頻解碼，高性能的 H.26 ...

elementUI 2個輸入框 時間區間月份選擇

elementUI 2個輸入框時間區間月份選擇