js+vue+elementui原生日歷

需要的js地址文章正在審核中... - 簡書

? <div>

? ? <div class="dateBox">

? ? ?

? ? ? <div>

? ? ? ? <span class="checkDateBox">

? ? ? ? ? <el-date-picker

? ? ? ? ? ? v-model="dateData"

? ? ? ? ? ? format="yyyy-MM"

? ? ? ? ? ? value-format="yyyy-MM"

? ? ? ? ? ? type="month"

? ? ? ? ? ? placeholder="選擇月"

? ? ? ? ? ? @change="dateChange"

? ? ? ? ? >

? ? ? ? ? </el-date-picker>

? ? ? ? </span>

? ? ? ? <span class="backBtn">

? ? ? ? ? <el-button type="primary" @click="currentTime"

? ? ? ? ? ? >返回當前時間</el-button

? ? ? ? ? >

? ? ? ? </span>

? ? ? </div>

? ? ? <div class="faceplate">

? ? ? ?

? ? ? ? <div class="box">

? ? ? ? ? <div

? ? ? ? ? ? class="timeBox"

? ? ? ? ? ? v-for="(item, index) in weekList"

? ? ? ? ? ? :key="index"

? ? ? ? ? ? :style="index == 5 || index == 6 ? 'color:#dc9514' : 'color:#fff'"

? ? ? ? ? >

? ? ? ? ? ? {{ item.tit }} <span>{{ item.en }}</span>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ?

? ? ? ? <div class="box">

? ? ? ? ? <div

? ? ? ? ? ? class="timeBoxNum"

? ? ? ? ? ? v-for="(item, index) in dataList"

? ? ? ? ? ? :key="index"

? ? ? ? ? ? :style="

? ? ? ? ? ? ? item.type == 2

? ? ? ? ? ? ? ? ? 'background: #e4e7ed;'

? ? ? ? ? ? ? ? : intraday == item.day && item.nowYear == 1&&item.type ==1

? ? ? ? ? ? ? ? ? 'background: pink'

? ? ? ? ? ? ? ? : 'background: #fff'

? ? ? ? ? ? "

? ? ? ? ? ? @click="timeClick(index)"

? ? ? ? ? >

? ? ? ? ? ? <div class="tiemStr">{{ item.day }}</div>

? ? ? ? ? ? <div class="tiemStr" style="margin-bottom:5px" v-if="item.ChineseCalendar.Term !=null">{{item.ChineseCalendar.Term}}</div>

? ? ? ? ? ? <div class="tiemStr" style="margin-bottom:5px" v-else-if="item.ChineseCalendar.IDayCn == '初一'">{{item.ChineseCalendar.IMonthCn}}</div>

? ? ? ? ? ? <div class="tiemStr" style="margin-bottom:5px" v-else>{{item.ChineseCalendar.IDayCn}}</div>

? ? ? ? ? ? <div class="tiemStr">{{ item.pullText }}</div>

? ? ? ? ? ? <div class="tiemStr">{{ item.explain }}</div>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? </div>

? ? </div>

? ? <el-dialog

? ? ? title="編輯日歷"

? ? ? :visible.sync="dialogVisible"

? ? ? width="50%"

? ? ? :before-close="handleClose"

? ? >

? ? ? <div>

? ? ? ? <el-form

? ? ? ? ? :model="ruleForm"

? ? ? ? ? :rules="rules"

? ? ? ? ? ref="ruleForm"

? ? ? ? ? label-width="100px"

? ? ? ? ? class="demo-ruleForm"

? ? ? ? ? :label-position="labelPosition"

? ? ? ? >

? ? ? ? ? <el-form-item label="選擇當前日期類型" prop="selectValue">

? ? ? ? ? ? <el-select

? ? ? ? ? ? ? v-model="ruleForm.selectValue"

? ? ? ? ? ? ? placeholder="請選擇活動區(qū)域"

? ? ? ? ? ? >

? ? ? ? ? ? ? <el-option

? ? ? ? ? ? ? ? v-for="item in options"

? ? ? ? ? ? ? ? :key="item.value"

? ? ? ? ? ? ? ? :label="item.label"

? ? ? ? ? ? ? ? :value="item.value"

? ? ? ? ? ? ? >

? ? ? ? ? ? ? </el-option>

? ? ? ? ? ? </el-select>

? ? ? ? ? </el-form-item>

? ? ? ? ? <el-form-item label="請輸入需要說明的內(nèi)容" prop="details">

? ? ? ? ? ? <el-input type="textarea" v-model="ruleForm.details"></el-input>

? ? ? ? ? </el-form-item>

? ? ? ? </el-form>

? ? ? </div>

? ? ? <span slot="footer" class="dialog-footer">

? ? ? ? <el-button @click="dialogVisible = false">取消</el-button>

? ? ? ? <el-button type="primary" @click="tijiao">確定</el-button>

? ? ? </span>

? ? </el-dialog>

? </div>

</template>

import calendarFormatter from "@/utils/dataChange";

export default {

? data() {

? ? return {

? ? ? intraday: "", //當天

? ? ? intraMonth: "", //當月

? ? ? nowYear: "", //當年

? ? ? activeIndex: null, //點擊了哪個日期够掠，在她上面添加信息

? ? ? labelPosition: "top", //表單標題對其方式

? ? ? dialogVisible: false,

? ? ? options: [

? ? ? ? {

? ? ? ? ? value: "工作日",

? ? ? ? ? label: "工作日",

? ? ? ? },

? ? ? ? {

? ? ? ? ? value: "休息日",

? ? ? ? ? label: "休息日",

? ? ? ? },

? ? ? ],

? ? ? ruleForm: {

? ? ? ? selectValue: "", //下拉選中的值

? ? ? ? details: "", //多行輸入框的數(shù)據(jù)

? ? ? }, //表單數(shù)據(jù)

? ? ? dateData: "", //選擇的具體日期

? ? ? dataList: [], //日歷面板數(shù)據(jù)

? ? ? weekList: [

? ? ? ? {

? ? ? ? ? tit: "星期一",

? ? ? ? ? en: "MON",

? ? ? ? },

? ? ? ? { tit: "星期二", en: "TUN" },

? ? ? ? { tit: "星期三", en: "WEN" },

? ? ? ? { tit: "星期四", en: "THU" },

? ? ? ? { tit: "星期五", en: "FRI" },

? ? ? ? { tit: "星期六", en: "SAT" },

? ? ? ? { tit: "星期日", en: "SUN" },

? ? ? ],

? ? ? rules: {

? ? ? ? selectValue: [

? ? ? ? ? { required: true, message: "請選擇當前日期類型", trigger: "blur" },

? ? ? ? ],

? ? ? },

? ? };

? },

? methods: {

? ? // 確定處理數(shù)據(jù)事件

? ? submitForm() {

? ? ? this.dialogVisible = false;

? ? ? this.dataList[this.activeIndex].pullText = this.ruleForm.selectValue;

? ? ? this.dataList[this.activeIndex].explain = this.ruleForm.details;

? ? },

? ? // 表單的提交

? ? tijiao() {

? ? ? this.$refs["ruleForm"].validate((valid) => {

? ? ? ? if (valid) {

? ? ? ? ? this.submitForm();

? ? ? ? } else {

? ? ? ? ? return false;

? ? ? ? }

? ? ? });

? ? },

? ? // 點擊日期彈層出現(xiàn)

? ? timeClick(index) {

? ? ? this.activeIndex = index;

? ? ? this.dialogVisible = true;

? ? },

? ? //時間的切換

? ? dateChange() {

? ? ? this.dataList = [];

? ? ? this.getDays(this.dateData);

? ? },

? ? // 獲取某年某月的天數(shù)

? ? getDays(indate) {

? ? ? // let indate = "2022-07";

? ? ? var timeData = indate + "-01";

? ? ? var year = parseInt(indate.split("-")[0]);

? ? ? var month = parseInt(indate.split("-")[1]);

? ? ? //run nian

? ? ? var isrun = false;

? ? ? if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) isrun = true;

? ? ? switch (month) {

? ? ? ? case 2:

? ? ? ? ? if (isrun) {

? ? ? ? ? ? this.returnDetialDay(timeData, 29);

? ? ? ? ? ? return 29;

? ? ? ? ? } else {

? ? ? ? ? ? this.returnDetialDay(timeData, 28);

? ? ? ? ? ? return 28;

? ? ? ? ? }

? ? ? ? case 1:

? ? ? ? case 3:

? ? ? ? case 5:

? ? ? ? case 7:

? ? ? ? case 8:

? ? ? ? case 10:

? ? ? ? case 12:

? ? ? ? ? this.returnDetialDay(timeData, 31);

? ? ? ? ? return 31;

? ? ? ? default:

? ? ? ? ? this.returnDetialDay(timeData, 30);

? ? ? ? ? return 30;

? ? ? }

? ? },

? ? // 返回某天是星期幾 --- 前面需要加幾天

? ? returnDetialDay(val, day) {

? ? ? var y = val.substring(0, 4),

? ? ? ? m = val.substring(5, 7),

? ? ? ? newM = m >= 10 ? m - 1 : val.substring(6, 7) - 1; //為了獲取前一個月的最后一天數(shù)據(jù) 小于10月的會有補0需要判斷處理

? ? ? var lastDay = new Date(y, newM, 0); //某年月的最后一天中國標準時間格式

? ? ? var newlastDay = lastDay.getDate(); //轉(zhuǎn)化為具體數(shù)字格式

? ? ? // val 傳入的格式： 2022-07-06

? ? ? let timeArr = val.split("-");

? ? ? var myDate = new Date();

? ? ? myDate.setFullYear(timeArr[0], Number(timeArr[1]) - 1, timeArr[2]);

? ? ? var week = myDate.getDay();

? ? ? let obj = {

? ? ? ? year: y, //選中的年份

? ? ? ? month:m,//選中的月份

? ? ? ? text: "", // 選中月第一天是周幾

? ? ? ? start: null, //選中月前面展示上月的天數(shù)

? ? ? ? end: null, // 選中月后面展示下月的天數(shù)

? ? ? ? time: val.substring(0, 7), //選中的年月格式

? ? ? ? lastDay: newlastDay, //選中月上一個月份的最后一天

? ? ? ? day: day,

? ? ? };

? ? ? if (week == 0) {

? ? ? ? obj.text = "周日";

? ? ? ? obj.start = 6;

? ? ? ? obj.end = 42 - 6 - day;

? ? ? } else if (week == 1) {

? ? ? ? obj.text = "周一";

? ? ? ? obj.start = 0;

? ? ? ? obj.end = 42 - 0 - day;

? ? ? } else if (week == 2) {

? ? ? ? obj.text = "周二";

? ? ? ? obj.start = 1;

? ? ? ? obj.end = 42 - 1 - day;

? ? ? } else if (week == 3) {

? ? ? ? obj.text = "周三";

? ? ? ? obj.start = 2;

? ? ? ? obj.end = 42 - 2 - day;

? ? ? } else if (week == 4) {

? ? ? ? obj.text = "周四";

? ? ? ? obj.start = 3;

? ? ? ? obj.end = 42 - 3 - day;

? ? ? } else if (week == 5) {

? ? ? ? obj.text = "周五";

? ? ? ? obj.start = 4;

? ? ? ? obj.end = 42 - 4 - day;

? ? ? } else if (week == 6) {

? ? ? ? obj.text = "周六";

? ? ? ? obj.start = 5;

? ? ? ? obj.end = 42 - 5 - day;

? ? ? }

? ? ? this.panelDate(obj);

? ? },

? ? panelDate(textobj) {

? ? ? // ?上一月展示的天數(shù)

? ? ? let minnum = textobj.lastDay - textobj.start + 1;

? ? ? for (var i = minnum; i <= textobj.lastDay; i++) {

? ? ? ? let obj = {

? ? ? ? ? year:textobj.month == '01'? textobj.year -1:textobj.year,//展示日期的年

? ? ? ? ? month:textobj.month == '01'?12:textobj.month-1,//展示日期的月

? ? ? ? ? pullText: "", //下拉選中 ?例如工作日

? ? ? ? ? explain: "", //說明

? ? ? ? ? day: i, //多少號

? ? ? ? ? type: 2, //是否是本月 1為是 ? 2為上個月或下個月 ?3為不是本月

? ? ? ? ? nowYear: 2,

? ? ? ? };

? ? ? ? this.dataList.push(obj);

? ? ? }

? ? ? // ?本月展示的天數(shù)

? ? ? for (var j = 1; j <= textobj.day; j++) {

? ? ? ? let obj = {

? ? ? ? ? year:textobj.year,//展示日期的年

? ? ? ? ? month:textobj.month,//展示日期的月

? ? ? ? ? pullText: "", //下拉選中 ?例如工作日

? ? ? ? ? explain: "", //說明

? ? ? ? ? day: j, //多少號

? ? ? ? ? type: this.intraMonth == textobj.month?1:3, //是否是本月 1為是 ? 2為上個月或下個月 ?3為不是本月

? ? ? ? ? nowYear: this.nowYear == textobj.year ? 1 : 2,

? ? ? ? };

? ? ? ? this.dataList.push(obj);

? ? ? }

? ? ? // ? 下月展示的天數(shù)

? ? ? for (var t = 1; t <= textobj.end; t++) {

? ? ? ? let obj = {

? ? ? ? ? year:textobj.month == '12'? textobj.year*1 +1 : textobj.year,//展示日期的年

? ? ? ? ? month:textobj.month == '12'?'01':textobj.month*1+1,//展示日期的月

? ? ? ? ? pullText: "", //下拉選中 ?例如工作日

? ? ? ? ? explain: "", //說明

? ? ? ? ? day: t, //多少號

? ? ? ? ? type: 2, //是否是本月 1為是 ? 2為上個月或下個月 3為不是本月

? ? ? ? ? nowYear: 2,

? ? ? ? };

? ? ? ? this.dataList.push(obj);

? ? ? }

? ? ? // console.log("時間數(shù)據(jù)", textobj, this.dataList);

? ? ? for(var f = 0 ; f < this.dataList.length; f++){

? ? ? ? let item = this.dataList[f]

? ? ? ? this.dataList[f].ChineseCalendar = calendarFormatter.solar2lunar(item.year, item.month, item.day)

? ? ? }

? ? ? console.log("時間數(shù)據(jù)", this.dataList);

? ? },

? ? // 監(jiān)測彈出層是否關(guān)閉

? ? handleClose() {

? ? ? this.dialogVisible = false;

? ? ? this.$refs["ruleForm"].resetFields();

? ? ? this.ruleForm = {

? ? ? ? selectValue: "", //下拉選中的值

? ? ? ? details: "", //多行輸入框的數(shù)據(jù)

? ? ? };

? ? },

? ? currentTime() {

? ? ? var date = new Date();

? ? ? let year = date.getFullYear(); //獲取完整的年份(4位)

? ? ? let m = date.getMonth() + 1; //獲取當前月份(0-11,0代表1月)

? ? ? this.intraday = new Date().getDate(); // 當前天

? ? ? this.nowYear = year;

? ? ? this.dataList = [];

? ? ? let newM = m < 10 ? "0" + m : m;

? ? ? this.dateData = year + "-" + newM;

? ? ? this.intraMonth = newM //當月

? ? ? this.getDays(this.dateData);

? ? },

? },

? mounted() {

? ? this.currentTime();

? },

};

</script>

.dateBox {

? width: 80%;

? border: 1px solid #ccc;

? margin: 0 auto;

}

.checkDateBox {

? display: inline-block;

? width: 200px;

}

.backBtn {

? float: right;

}

.faceplate {

? margin-top: 20px;

}

.box {

? text-align: center;

? margin: 0 auto;

}

.timeBox {

? display: inline-block;

? width: 13%;

? background: blue;

? height: 40px;

? line-height: 40px;

? text-align: center;

? color: #fff;

? border-left: 1px solid pink;

? box-sizing: border-box;

? vertical-align: text-top;

}

.timeBox:nth-child(7) {

? border-right: 1px solid pink;

}

.timeBoxNum {

? display: inline-block;

? width: 13%;

? background: #fff;

? height: 150px;

? text-align: center;

? color: black;

? border-left: 1px solid #ccc;

? border-bottom: 1px solid #ccc;

? padding: 0px 10px;

? box-sizing: border-box;

? cursor: pointer;

? vertical-align: text-top;

}

.timeBoxNum:nth-child(7n) {

? border-right: 1px solid #ccc;

}

.tiemStr {

? display: block;

? text-align: left;

? color: black;

}

</style>

最后編輯于：2022.07.08 09:52:48

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子寺滚，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 222,590評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異刊殉，居然都是意外死亡，警方通過查閱死者的電腦和手機州胳，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,157評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門记焊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人栓撞，你說我怎么就攤上這事遍膜⊥胗玻” “怎么了？”我有些...
開封第一講書人閱讀 169,301評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵瓢颅，是天一觀的道長恩尾。經(jīng)常有香客問我，道長挽懦，這世上最難降的妖魔是什么翰意？我笑而不...
開封第一講書人閱讀 60,078評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮信柿，結(jié)果婚禮上猎物，老公的妹妹穿的比我還像新娘。我一直安慰自己角塑，他們只是感情好，可當我...
茶點故事閱讀 69,082評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布淘讥。她就那樣靜靜地躺著圃伶，像睡著了一般。火紅的嫁衣襯著肌膚如雪蒲列。梳的紋絲不亂的頭發(fā)上窒朋，一...
開封第一講書人閱讀 52,682評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音蝗岖，去河邊找鬼侥猩。笑死，一個胖子當著我的面吹牛抵赢，可吹牛的內(nèi)容都是我干的欺劳。我是一名探鬼主播，決...
沈念sama閱讀 41,155評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼铅鲤，長吁一口氣：“原來是場噩夢啊……” “哼划提！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起邢享，我...
開封第一講書人閱讀 40,098評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤鹏往，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后骇塘，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伊履，經(jīng)...
沈念sama閱讀 46,638評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,701評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年款违，在試婚紗的時候發(fā)現(xiàn)自己被綠了唐瀑。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,852評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡奠货，死狀恐怖介褥，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤柔滔，帶...
沈念sama閱讀 36,520評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布溢陪，位于F島的核電站，受9級特大地震影響睛廊，放射性物質(zhì)發(fā)生泄漏形真。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 42,181評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一超全、第九天我趴在偏房一處隱蔽的房頂上張望咆霜。院中可真熱鬧，春花似錦嘶朱、人聲如沸蛾坯。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,674評論 0贊 25
一樁弒父案疏遏，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽脉课。三九已至，卻和暖如春财异，著一層夾襖步出監(jiān)牢的瞬間倘零，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,788評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工戳寸，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留呈驶，地道東北人。一個月前我還...
沈念sama閱讀 49,279評論 3贊 379
代替公主和親
正文我出身青樓疫鹊，卻偏偏與公主長得像袖瞻，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子订晌，可洞房花燭夜當晚...
茶點故事閱讀 45,851評論 2贊 361

js+vue+elementui原生日歷

推薦閱讀更多精彩內(nèi)容