main.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. /* REM算法 */
  2. var sw = window.innerWidth
  3. document.documentElement.style.fontSize = (sw / 750) * 100 + 'px'
  4. window.onresize = function () {
  5. var sw = window.innerWidth
  6. document.documentElement.style.fontSize = (sw / 750) * 100 + 'px'
  7. }
  8. Vue.component('mycalendarDay',{
  9. props:['data'],
  10. mounted() {
  11. console.log('mycalendarDay',this.data)
  12. },
  13. methods:{
  14. selectDate:function(v){
  15. this.$emit('selectDate',v)
  16. },
  17. addClass:function(v){
  18. return v.disabled + " "+ v.disabled2 + " " +v.start_date + "" + v.end_date +" " + v.active_date
  19. }
  20. },
  21. template:'<div>\
  22. <div class="day" v-for="(item2,index) in data.days" :class="addClass(item2)" @click="selectDate(item2)">{{item2.day}}</div>\
  23. </div>'
  24. })
  25. Vue.component('mycalendar',{
  26. props:{
  27. month_length:{//最长预定多少个月后
  28. type:Number,
  29. default:2
  30. },
  31. start:{
  32. type:String,
  33. default:''
  34. },
  35. end:{
  36. type:String,
  37. default:''
  38. }
  39. },
  40. data:function(){
  41. return {
  42. start: '', //开始时间。从当天开始。
  43. calendar: [],
  44. max_reserve_days: 0, //最长预定天数。,一个月按30天计划
  45. max_reserve_date: '', //最长可预定的日期。例如:2019-09-12
  46. select_start_ymd: '', //入住开始提交时间 例如:2019-5-8
  47. select_start_show: '', //入住开始显示时间 例如:05月08日
  48. select_end_ymd: '', //离店开始提交时间 例如:2019-5-8
  49. select_end_show: '', //离店开始显示时间 例如:05月08日
  50. select_index: 'start', //记录当前点击时间,所对应的时间是开始时间还是结束时间
  51. select_all_day: '',
  52. }
  53. },
  54. methods: {
  55. initDate: function() {
  56. var _this = this;
  57. // 创建时间对象
  58. let date = new Date();
  59. // 获取完整年月
  60. let fullDate = [
  61. date.getFullYear(),
  62. date.getMonth() + 1,
  63. date.getDate(),
  64. date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
  65. ];
  66. var select_start_ymd = _this.start;
  67. var select_start_ymd_show = '';
  68. var select_end_ymd = _this.end;
  69. var select_end_ymd_show = '';
  70. //debugger;
  71. if (select_start_ymd == '' || select_start_ymd == undefined || select_start_ymd == 'undefined' || _this.compareDate(
  72. select_start_ymd, fullDate[3]) == 3) {
  73. select_start_ymd = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  74. select_start_ymd_show = _this.parseMonth(date.getMonth() + 1) + '月' + _this.parseDay(date.getDate()) + '日';
  75. }
  76. if (select_end_ymd == '' || select_end_ymd == undefined || select_end_ymd == 'undefined' || _this.compareDate(
  77. select_end_ymd, fullDate[3]) == 3) {
  78. let temp_date = new Date(date.getTime() + 86400 * 1000)
  79. select_end_ymd = temp_date.getFullYear() + '-' + (temp_date.getMonth() + 1) + '-' + temp_date.getDate();
  80. select_end_ymd_show = _this.parseMonth(temp_date.getMonth() + 1) + '月' + _this.parseDay(temp_date.getDate()) +
  81. '日';
  82. }
  83. //设置数据。并且保存缓存
  84. _this.select_start_ymd = select_start_ymd
  85. _this.select_end_ymd = select_end_ymd
  86. //通过月份。计划最长可预定天数和日期 ,最后一天为离店时间。所以多加一天可选择
  87. let max_reserve_days = _this.month_length * 30 + 1;
  88. //最大天数转换成毫秒数。再转换成时间
  89. let max_date = new Date(date.getTime() + max_reserve_days * 24 * 60 * 60 * 1000);
  90. let max_reserve_date = max_date.getFullYear() + '-' + (max_date.getMonth() + 1) + '-' + max_date.getDate() + '';
  91. _this.max_reserve_days = max_reserve_days
  92. _this.max_reserve_date = max_reserve_date
  93. //获取当前月份完整日期天数
  94. let cur_month_date = new Date(fullDate[0] + '-' + _this.parseMonth(fullDate[1]) + '-01')
  95. let cur_month = {};
  96. cur_month.fullYear = fullDate[0]; // 年
  97. cur_month.fullMonth = fullDate[1]; //月
  98. cur_month.dayLength = _this.getMonthDays(cur_month.fullMonth, cur_month.fullYear); //当前月份总共有多少天
  99. cur_month.firstDayWeek = cur_month_date.getDay(); //当前月份第一天星期几0~7
  100. cur_month.curDay = date.getDate(); //当前天
  101. cur_month.days = [];
  102. //初始化天数
  103. var item = {};
  104. for (let i = 1; i <= cur_month.dayLength; i++) {
  105. item = {
  106. ymd: cur_month.fullYear + '-' + cur_month.fullMonth + '-' + i,
  107. ymd_cn: _this.parseMonth(cur_month.fullMonth) + '月' + _this.parseDay(i) + '日',
  108. day: i,
  109. disabled: i < cur_month.curDay ? 'disabled' : '',
  110. };
  111. //开始时间
  112. item.start_date = _this.compareDate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
  113. //中间的日期
  114. item.active_date = (_this.compareDate(_this.select_start_ymd, item.ymd) == 3 && _this.compareDate(_this.select_end_ymd,
  115. item.ymd) == 1) ? 'active' : '';
  116. //结束时间
  117. item.end_date = _this.compareDate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
  118. //超过设置最长日期。禁止选择
  119. item.disabled2 = _this.compareDate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
  120. cur_month['days'].push(item);
  121. }
  122. //前补0
  123. if (cur_month.firstDayWeek > 0) {
  124. for (let i = 0; i < cur_month.firstDayWeek; i++) {
  125. cur_month['days'].unshift('');
  126. }
  127. }
  128. _this.calendar.push(cur_month)
  129. var next_month_date;
  130. var nextfullDate = [];
  131. for (let i2 = 0; i2 < _this.month_length; i2++) {
  132. //下一个朋的天数信息
  133. next_month_date = new Date(fullDate[0], fullDate[1] + i2, '1');
  134. nextfullDate = [
  135. next_month_date.getFullYear(),
  136. next_month_date.getMonth() + 1,
  137. ]
  138. var next_month = {};
  139. next_month.fullYear = nextfullDate[0]; // 年
  140. next_month.fullMonth = nextfullDate[1]; //月
  141. next_month.dayLength = _this.getMonthDays(next_month.fullMonth, next_month.fullYear); //当前月份总共有多少天
  142. next_month.firstDayWeek = next_month_date.getDay(); //当前月份第一天星期几0~6
  143. next_month.days = [];
  144. //初始化天数
  145. for (let i = 1; i <= next_month.dayLength; i++) {
  146. item = {
  147. ymd: next_month.fullYear + '-' + next_month.fullMonth + '-' + i,
  148. ymd_cn: _this.parseMonth(next_month.fullMonth) + '月' + _this.parseDay(i) + '日',
  149. day: i,
  150. active: '',
  151. disabled: '',
  152. };
  153. //开始时间
  154. item.start_date = _this.compareDate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
  155. //中间的日期
  156. item.active_date = (_this.compareDate(_this.select_start_ymd, item.ymd) == 3 && _this.compareDate(_this.select_end_ymd,
  157. item.ymd) == 1) ? 'active' : '';
  158. //结束时间
  159. item.end_date = _this.compareDate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
  160. //超过设置最长日期。禁止选择
  161. item.disabled2 = _this.compareDate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
  162. next_month['days'].push(item);
  163. }
  164. //前补0
  165. if (next_month.firstDayWeek > 0) {
  166. for (let i = 0; i < next_month.firstDayWeek; i++) {
  167. next_month['days'].unshift('');
  168. }
  169. }
  170. _this.calendar.push(next_month)
  171. }
  172. console.log(_this.calendar);
  173. },
  174. //格式月份期
  175. parseMonth: function(month) {
  176. month = parseInt(month);
  177. if (month < 10) {
  178. month = '0' + month
  179. }
  180. return month;
  181. },
  182. //格式天
  183. parseDay: function(day) {
  184. day = parseInt(day);
  185. if (day < 10) {
  186. day = '0' + day
  187. }
  188. return day;
  189. },
  190. // 获取每个月的天数
  191. getMonthDays(m, year) {
  192. let days = [0, 31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  193. if (m != 2) {
  194. return days[m];
  195. }
  196. if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 100 === 0)) {
  197. return 29
  198. } else {
  199. return 28
  200. }
  201. },
  202. compareDate(date1, date2) {
  203. var dateone = date1.replace(/-/g, '/');
  204. var datetwo = date2.replace(/-/g, '/');
  205. var oDate1 = new Date(dateone)
  206. var oDate2 = new Date(datetwo)
  207. if (oDate1.getTime() > oDate2.getTime()) {
  208. return 1; //大于
  209. } else if (oDate1.getTime() == oDate2.getTime()) {
  210. return 2; //等于
  211. } else {
  212. return 3; //小于
  213. }
  214. },
  215. //点击日期按钮
  216. selectDate: function(item) {
  217. var _this = this;
  218. let select_data = item;
  219. console.log(select_data)
  220. let select_start_ymd = _this.select_start_ymd;
  221. let select_end_ymd = _this.select_end_ymd;
  222. //如果是点击不能用的地址
  223. if (select_data.disabled != '') {
  224. return false;
  225. }
  226. if (_this.select_index == 'start') {
  227. select_start_ymd = select_data.ymd;
  228. _this.select_start_ymd = select_start_ymd;
  229. _this.select_start_ymd_show = select_data.ymd_cn;
  230. _this.select_end_ymd = '';
  231. _this.select_end_ymd_show = '';
  232. _this.select_index = 'end';
  233. } else if (_this.select_index == 'end') {
  234. let v = _this.compareDate(select_start_ymd, select_data.ymd)
  235. //如果选择的时间大于开始时间。则有效。否则重置开始时间
  236. if (v == 3) {
  237. _this.select_end_ymd = select_data.ymd;
  238. _this.select_end_ymd_show = select_data.ymd_cn;
  239. //将索引改为结束时间
  240. _this.select_index = 'start';
  241. //保存数据到缓存
  242. _this.saveDate();
  243. } else {
  244. _this.select_start_ymd = select_data.ymd;
  245. _this.select_start_ymd_show = select_data.ymd_cn;
  246. _this.select_end_ymd = '';
  247. _this.select_end_ymd_show = '';
  248. //将索引改为结束时间
  249. _this.select_index = 'end';
  250. }
  251. }
  252. _this.resetCalendar();
  253. },
  254. //重新计算一下日历
  255. resetCalendar: function() {
  256. let _this = this;
  257. let calendar = _this.calendar;
  258. if (calendar.length > 0) {
  259. for (var i in calendar) {
  260. if (calendar[i]['days'].length > 0) {
  261. for (var i2 in calendar[i]['days']) {
  262. if (calendar[i]['days'][i2] != '') {
  263. //开始时间
  264. calendar[i]['days'][i2]['start_date'] = _this.compareDate(_this.select_start_ymd, calendar[i]['days'][i2][
  265. 'ymd'
  266. ]) == 2 ? 'active-start' : '';
  267. //中间的日期
  268. calendar[i]['days'][i2]['active_date'] = (_this.compareDate(_this.select_start_ymd, calendar[i]['days'][i2]
  269. ['ymd']) == 3 && _this.compareDate(_this.select_end_ymd, calendar[i]['days'][i2]['ymd']) == 1) ?
  270. 'active' : '';
  271. //结束时间
  272. calendar[i]['days'][i2]['end_date'] = _this.compareDate(_this.select_end_ymd, calendar[i]['days'][i2][
  273. 'ymd'
  274. ]) == 2 ? 'active-end' : '';
  275. }
  276. }
  277. }
  278. }
  279. }
  280. _this.calendar = calendar;
  281. },
  282. //如果设置结束时间成功。保存一次当前时间。并且计算总天数。到缓存中
  283. saveDate: function() {
  284. var _this = this;
  285. var date1 = new Date(this.select_start_ymd.replace(/-/g, '/'));
  286. var date2 = new Date(this.select_end_ymd.replace(/-/g, '/'));
  287. //计算天数
  288. var days = parseInt((date2.getTime() - date1.getTime()) / 1000 / 86400);
  289. //保存缓存
  290. _this.select_all_day = days;
  291. },
  292. save:function(){
  293. this.$emit('comfirm',{
  294. startTime:this.$data.select_start_ymd,
  295. endTime:this.$data.select_end_ymd
  296. })
  297. },
  298. close:function(){
  299. this.$emit('close')
  300. }
  301. },
  302. mounted() {
  303. var _this = this;
  304. _this.$nextTick(function() {
  305. _this.initDate()
  306. console.log('calendar',_this.calendar)
  307. })
  308. },
  309. template:'<div><div class="myCalendar">\
  310. <div class="body">\
  311. <div class="calendar">\
  312. <div class="week-title">\
  313. <div>日</div>\
  314. <div>一</div>\
  315. <div>二</div>\
  316. <div>三</div>\
  317. <div>四</div>\
  318. <div>五</div>\
  319. <div>六</div>\
  320. </div>\
  321. <div class="box">\
  322. <div class="calendar-body">\
  323. <div v-for="(item,index) in calendar">\
  324. <div class="data-title">{{item.fullYear + "年" + item.fullMonth}}</div>\
  325. <div class="calendar-data">\
  326. <mycalendar-day :data="item" @selectDate="selectDate"></mycalendar-day>\
  327. </div>\
  328. </div>\
  329. </div>\
  330. </div>\
  331. </div>\
  332. </div>\
  333. <div class="screenbottom">\
  334. <div class="reset" @click="close">取消</div>\
  335. <div class="determine" @click="save">确定</div>\
  336. </div>\
  337. </div></div>'
  338. })