graceDate.nvue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template name="graceDate">
  2. <view class="grace-date" v-if="show" :style="{top:top}" @tap.stop="" @touchmove.stop.prevent="">
  3. <view class="grace-date-header">
  4. <text class="grace-date-header-btn grace-icons" @click="prevYear">&#xe600;&#xe600;</text>
  5. <text class="grace-date-header-btn grace-icons" @click="prevMonth">&#xe600;</text>
  6. <text class="grace-date-header-date grace-icons">{{cYear}} 年 {{cMonth}} 月</text>
  7. <text class="grace-date-header-btn grace-icons" @click="nextMonth">&#xe601;</text>
  8. <text class="grace-date-header-btn grace-icons" @click="nextYear">&#xe601;&#xe601;</text>
  9. </view>
  10. <view class="grace-date-week">
  11. <text class="grace-date-weeks" v-for="(item, index) in weeks" :key="index">{{item}}</text>
  12. </view>
  13. <view class="grace-date-days">
  14. <view :class="['grace-date-ditems', currentDayIn == cYear+'-'+cMonthStr+'-'+ item.date ? 'grace-d-current' : '']"
  15. :style="{backgroundColor: currentDayIn == cYear+'-'+cMonthStr+'-'+ item.date ? activeBgColor : bgColor, borderRadius:borderRadius}"
  16. @click="chooseDate(cYear+'-'+cMonthStr+'-'+item.date, item.date)" v-for="(item, index) in days" :key="index">
  17. <text class="grace-date-day" :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'grace-d-current-txt' : '']">{{item.date}}</text>
  18. <text class="grace-date-nl" v-if="isLunar" :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'grace-d-current-txt' : '']">{{item.nl}}</text>
  19. </view>
  20. </view>
  21. <view class="grace-nowrap grace-flex-center" style="margin-top:50rpx;" v-if="isTime">
  22. <picker mode="time" @change="timechange" :value="currentTimeIn">
  23. <text class="grace-date-time">时间 : {{currentTimeIn}}</text>
  24. </picker>
  25. </view>
  26. <view class="grace-date-btns" v-if="isTime">
  27. <text class="grace-date-btns-text" @click="close" style="color:#888888;">关闭</text>
  28. <text class="grace-date-btns-text" @click="submit">确定</text>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. var CalendarData = new Array(100);
  34. var madd = new Array(12);
  35. var tgString = "甲乙丙丁戊己庚辛壬癸";
  36. var dzString = "子丑寅卯辰巳午未申酉戌亥";
  37. var numString = "一二三四五六七八九十";
  38. var monString = "正二三四五六七八九十冬腊";
  39. var weekString = "日一二三四五六";
  40. var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
  41. var cYear, cMonth, cDay, TheDate;
  42. CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
  43. madd[0] = 0;
  44. madd[1] = 31;
  45. madd[2] = 59;
  46. madd[3] = 90;
  47. madd[4] = 120;
  48. madd[5] = 151;
  49. madd[6] = 181;
  50. madd[7] = 212;
  51. madd[8] = 243;
  52. madd[9] = 273;
  53. madd[10] = 304;
  54. madd[11] = 334;
  55. function GetBit(m, n){return (m >> n) & 1;}
  56. //农历转换
  57. function e2c() {
  58. TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
  59. var total, m, n, k;
  60. var isEnd = false;
  61. var tmp = TheDate.getYear();
  62. if (tmp < 1900) {tmp += 1900;}
  63. total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
  64. if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {total++;}
  65. for (m = 0; ; m++) {
  66. k = (CalendarData[m] < 0xfff) ? 11 : 12;
  67. for (n = k; n >= 0; n--) {
  68. if (total <= 29 + GetBit(CalendarData[m], n)) {isEnd = true; break;}
  69. total = total - 29 - GetBit(CalendarData[m], n);
  70. }
  71. if (isEnd) break;
  72. }
  73. cYear = 1921 + m;
  74. cMonth = k - n + 1;
  75. cDay = total;
  76. if (k == 12) {
  77. if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {cMonth = 1 - cMonth;}
  78. if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {cMonth--;}
  79. }
  80. }
  81. function GetcDateString() {
  82. var tmp = "";
  83. tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
  84. if (cDay % 10 != 0 || cDay == 10) {tmp += numString.charAt((cDay - 1) % 10);}
  85. return tmp;
  86. }
  87. function GetLunarDay(solarYear, solarMonth, solarDay) {
  88. if (solarYear < 1921) {return "";}
  89. solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
  90. e2c(solarYear, solarMonth, solarDay);
  91. return GetcDateString();
  92. }
  93. export default {
  94. name: "graceCountd",
  95. props: {
  96. show : {
  97. type : Boolean,
  98. default : false
  99. },
  100. currentDate : {
  101. type : String,
  102. default : ""
  103. },
  104. isTime : {
  105. type : Boolean,
  106. default :true
  107. },
  108. top : {
  109. type : String,
  110. default : '0'
  111. },
  112. bgColor : {type:String, default:"#F6F7F8"},
  113. activeBgColor : {type:String, default:"#3688FF"},
  114. borderRadius : {type:String, default:"6rpx"},
  115. isLunar : {type:Boolean, default:true }
  116. },
  117. data(){
  118. return {
  119. weeks : ['一', '二', '三', '四', '五', '六', '日'],
  120. cYear : 2016,
  121. cMonth : 6,
  122. cMonthStr : "06",
  123. cDay : "01",
  124. days : '',
  125. currentDayIn : '',
  126. currentTimeIn: ''
  127. }
  128. },
  129. methods: {
  130. timechange : function(e){
  131. this.currentTimeIn = e.detail.value;
  132. },
  133. getDaysInOneMonth : function (){
  134. var d = new Date(this.cYear, this.cMonth, 0);
  135. return d.getDate();
  136. },
  137. getDay : function (){
  138. var d = new Date(this.cYear, this.cMonth - 1, 0);
  139. return d.getDay();
  140. },
  141. prevYear : function(){
  142. this.cYear = this.cYear - 1;
  143. this.changeMonth();
  144. },
  145. prevMonth : function(){
  146. this.cMonth = this.cMonth - 1;
  147. if (this.cMonth < 1) { this.cMonth = 12; this.cYear = this.cYear - 1; }
  148. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  149. this.changeMonth();
  150. },
  151. nextMonth : function(){
  152. this.cMonth = this.cMonth + 1;
  153. if (this.cMonth > 12){this.cMonth = 1; this.cYear = this.cYear + 1;}
  154. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  155. this.changeMonth();
  156. },
  157. nextYear : function(){
  158. this.cYear = this.cYear + 1;
  159. this.changeMonth();
  160. },
  161. changeMonth:function(){
  162. var daysList = [];
  163. var days = this.getDaysInOneMonth();
  164. var startWeek = this.getDay();
  165. var forSteps = 0;
  166. for (var i = (0 - startWeek); i < days; i++){
  167. if(i >= 0){
  168. daysList[forSteps] = {date : i >= 9 ? i + 1 : '0' + (i+1), nl : ''};
  169. daysList[forSteps].nl = GetLunarDay(this.cYear, this.cMonth, i + 1);
  170. }else{
  171. daysList[forSteps] = '';
  172. }
  173. forSteps++;
  174. }
  175. this.days = daysList;
  176. },
  177. chooseDate: function (sedDate, isday) {
  178. if(!isday){return ;}
  179. this.currentDayIn = sedDate;
  180. if(this.isTime){return ;}
  181. this.$emit('changeDate', sedDate);
  182. },
  183. submit : function(){
  184. if(this.isTime){
  185. this.$emit('changeDate', this.currentDayIn+' '+this.currentTimeIn);
  186. }else{
  187. this.$emit('changeDate', this.currentDayIn);
  188. }
  189. },
  190. close : function(){
  191. this.$emit("closeDate");
  192. },
  193. //初始化时间
  194. initTime : function(){
  195. if(this.currentDate == ''){
  196. var dateObj = new Date();
  197. this.cYear = dateObj.getFullYear();
  198. this.cMonth = dateObj.getMonth() + 1;
  199. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  200. this.cDay = dateObj.getDate();
  201. this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
  202. this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
  203. this.currentTimeIn = '00:00';
  204. this.changeMonth();
  205. }else{
  206. var dates = this.currentDate.split(' ');
  207. if (!dates[1]) { dates[1] = '';}
  208. var dayArr = dates[0].split('-');
  209. this.cYear = Number(dayArr[0]);
  210. this.cMonth = dayArr[1];
  211. this.cDay = dayArr[2];
  212. var reg = new RegExp('^0[0-9]+$');
  213. if(reg.test(this.cMonth)){this.cMonth = this.cMonth.substr(1,1);}
  214. this.cMonth = Number(this.cMonth);
  215. this.cMonthStr = this.cMonth < 10 ? '0'+this.cMonth : this.cMonth;
  216. this.currentDayIn = dates[0];
  217. this.currentTimeIn = dates[1];
  218. this.changeMonth();
  219. }
  220. }
  221. },
  222. created:function(){this.initTime();},
  223. watch:{
  224. currentDate : function(){this.initTime();}
  225. }
  226. }
  227. </script>
  228. <style scoped>
  229. .grace-date{position:fixed; left:0; top:0; bottom:0; width:750rpx; flex:1; padding:10rpx; align-items:center; background-color:#FFFFFF;}
  230. .grace-date-header{justify-content:center; flex-direction:row; text-align:center; margin-top:20rpx;}
  231. .grace-date-header-btn{font-size:36rpx; line-height:88rpx; padding:0 10rpx; color:#888888;}
  232. .grace-date-header-date{line-height:88rpx; font-size:36rpx; margin:0 20rpx;}
  233. .grace-date-week{text-align:center; width:702rpx; flex-wrap:nowrap; flex-direction:row;}
  234. .grace-date-weeks{width:100rpx; color:#666666; height:80rpx; text-align:center; font-size:32rpx; line-height:80rpx;}
  235. .grace-date-days{width:700rpx; flex-direction:row; flex-wrap:wrap;}
  236. .grace-date-ditems{width:96rpx; height:96rpx; margin:2rpx; background-color:#F6F7F8; border-radius:5rpx; flex-direction:column; align-items:center; justify-content:center;}
  237. .grace-d-current{background-color:#3688FF;}
  238. .grace-d-current-txt{color:#FFFFFF;}
  239. .grace-date-day{height:38rpx; line-height:38rpx; text-align:center; font-size:32rpx;}
  240. .grace-date-nl{height:26rpx; line-height:26rpx; color:#888888; font-size:20rpx; text-align:center;}
  241. .grace-date-btns{text-align:center; margin-top:10rpx; flex-direction:row; justify-content:space-between; position:absolute; left:0; bottom:20px; width:730rpx;}
  242. .grace-date-btns-text{color:#3688FF; line-height:100rpx; font-size:30rpx; text-align:center; width:300rpx;}
  243. .grace-date-time{font-size:30rpx; line-height:100rpx; margin-top:30rpx; color:#666666; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#F1F2F3; border-top-style:solid; border-top-width:1px; border-top-color:#F1F2F3;}
  244. </style>