{"id":29,"date":"2019-11-14T21:59:06","date_gmt":"2019-11-14T13:59:06","guid":{"rendered":"http:\/\/yichenghui.net\/?p=29"},"modified":"2019-11-14T23:12:36","modified_gmt":"2019-11-14T15:12:36","slug":"vuedatepickerpluging","status":"publish","type":"post","link":"https:\/\/yichenghui.net\/index.php\/2019\/11\/14\/vuedatepickerpluging\/","title":{"rendered":"\u7f16\u5199\u4e00\u4e2aVue\u63d2\u4ef6"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>    let time = new Date(),\n        dateArray = new Array(180).fill(0),\n        oneDay = 86400000,\n        categroy = {};\n    dateArray.forEach((item, index) => {\n        let date = new Date(Date.parse(new Date(time)) + oneDay * index);\n        let year = date.getFullYear(),\n            month = date.getMonth() + 1,\n            day = date.getDate();\n        month = month &lt; 10 ? `0${month}` : month;\n        day = day &lt; 10 ? `0${day}` : day;\n        let temp = `${year}-${month}-${day}`;\n        if (!categroy[`${year}-${month}`]) {\n            categroy[`${year}-${month}`] = [];\n            let week = new Date(temp).getDay();\n            for (let i = 0; i &lt; week; i++) {\n                categroy[`${year}-${month}`].push(\"\")\n            }\n        }\n        categroy[`${year}-${month}`].push(temp);\n    })\n\n    let MonthArray = Object.keys(categroy),\n        DayArray = Object.values(categroy),\n        WeekArray = [\"\u661f\u671f\u4e00\", \"\u661f\u671f\u4e8c\", \"\u661f\u671f\u4e09\", \"\u661f\u671f\u56db\", \"\u661f\u671f\u4e94\", \"\u661f\u671f\u516d\", \"\u661f\u671f\u5929\"];\n\n    let ComponentObj = {\n        props: {\n            value: {\n                type: String,\n                default: \"\"\n            }\n        },\n        template: `&lt;div class=\"date-picker-content\">\n                        &lt;div v-for=\"(item,index) in MonthArray\" :key=\"index\">\n                            &lt;p>{{item}}&lt;\/p>\n                            &lt;ul class=\"clearfix\">\n                                &lt;li v-for=\"(weekItem,weekIndex) in WeekArray\" :key=\"weekIndex\">{{weekItem}}&lt;\/li>\n                            &lt;\/ul>\n                            &lt;ul class=\"clearfix\">\n                                &lt;li v-for=\"(dayItem,dayIndex) in DayArray[index]\" :key=\"dayIndex\">\n                                    &lt;span v-if=\"dayItem\" @click=\"DateClick(dayItem)\" :class=\"{'active':dayItem==SelectDate}\">\n                                        {{dayItem}}\n                                    &lt;\/span>\n                                &lt;\/li>\n                            &lt;\/ul>\n                        &lt;\/div>\n                    &lt;\/div>`,\n        data() {\n            return {\n                MonthArray,\n                DayArray,\n                WeekArray,\n                SelectDate: \"\"\n            }\n        },\n        watch: {\n            SelectDate(newVal) {\n                this.SelectDate = newVal\n            }\n        },\n        methods: {\n            DateClick(value) {\n                this.SelectDate = value\n                this.$emit(\"input\", value)\n            }\n        }\n    }\n\n    const DatePicker = {\n        install(Vue, options) {\n            \/**\n             * ComponentObj\u662f\u4e00\u4e2avue\u7ec4\u4ef6\u5bf9\u8c61\n            *\/\n            Vue.component(\"DatePicker\", ComponentObj)\n        }\n    }\n\n    Vue.use(DatePicker)\n\n    new Vue({\n        el: \"#app\",\n        components: {\n            \/\/ datePicker: ComponentObj\n        },\n        data() {\n            return {\n                date: \"\"\n            }\n        },\n        watch: {\n            date(val, val2) {\n                console.log(val)\n            }\n        },\n        template: `&lt;div>&lt;datePicker v-model=\"date\" \/>&lt;\/div>`\n    })<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u53c2\u8003Vue\u5b98\u65b9\u6587\u6863\uff1a<br> <a href=\"https:\/\/cn.vuejs.org\/v2\/guide\/plugins.html\">https:\/\/cn.vuejs.org\/v2\/guide\/plugins.html<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/yichenghui.github.io\/DatePicker.html\">\u6700\u7ec8\u5b9e\u73b0\u6548\u679c<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u53c2\u8003Vue\u5b98\u65b9\u6587\u6863\uff1a https:\/\/cn.vuejs.org\/v2\/guide\/plugins.html \u6700 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/yichenghui.net\/index.php\/2019\/11\/14\/vuedatepickerpluging\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201c\u7f16\u5199\u4e00\u4e2aVue\u63d2\u4ef6\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":4,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/29\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}