elementUI日期时间选择器

分手后的思念是犯贱 2024-04-08 09:29 170阅读 0赞

1.只能选择今天和今天以后的时间范围

  1. <el-date-picker
  2.   v-model="shop.receive_time[0]"
  3.   type="date"
  4.   size="small"
  5.   format="yyyy-MM-dd"
  6.   value-format="yyyy-MM-dd"
  7.   :picker-options="pickerOptions"
  8.   @change="startTime(shop.seller_id, shop.receive_time)"
  9.   placeholder="选择交货开始日期">
  10. </el-date-picker>

data中加

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. pickerOptions: {
  6. disabledDate: time => {
  7.  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
  8. },
  9. }
  10. }
  11. }
  12. </script>

2.只能选择前一个月到昨天的时间范围

  1. <el-date-picker
  2. type="date"
  3. :placeholder="$t('financial.sell.choose_data')"
  4. format="yyyy-MM-dd"
  5. value-format="yyyy-MM-dd"
  6. :picker-options="pickerOptions"
  7. v-model="startDailyDate"
  8. style="width: 100%">
  9. </el-date-picker>

data中加

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. pickerOptions: {
  6. disabledDate: (time) => {
  7. return (
  8. time.getTime() < new Date(this.timeOne).getTime() - 8.64e7 ||
  9. time.getTime() > new Date(this.timeDefault).getTime()
  10. );
  11. },
  12. timeOne: "",
  13. },
  14. },
  15. computed: {
  16. //计算属性计算前一天的日期
  17. timeDefault() {
  18. var date = new Date();
  19. var month = date.getMonth() + 1;
  20. const newmonth = month >= 10 ? month : "0" + month;
  21. var s1 = date.getFullYear() + "-" + newmonth + "-" + (date.getDate() - 1);
  22. return s1;
  23. },
  24. },
  25. methods: {
  26. //获取当前年月日时分秒
  27. getDate() {
  28. const nowDate = new Date();
  29. var y = nowDate.getFullYear();
  30. var m = nowDate.getMonth() + 1;
  31. var d = nowDate.getDate();
  32. // 当前日期
  33. let nowDates =
  34. y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
  35. // 一月的时候年份要减一
  36. if (m == 1) {
  37. y--;
  38. m = 12;
  39. } else if (m == 3 && d > 28) {
  40. //三月要考虑是否为闰年
  41. m--;
  42. if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
  43. d = 29;
  44. } else {
  45. d - 28;
  46. }
  47. } else if ((m != 12 || m != 8) && d == 31) {
  48. //31号的月份要考虑上个月是否有31号
  49. m--;
  50. d = 30;
  51. } else {
  52. m--;
  53. }
  54. // 一个月前的日期
  55. this.timeOne =
  56. y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
  57. },
  58. },
  59. };
  60. </script>

69fb6b8c8d8d42fd9a27d3ce0b19fb35.pngeb545c2479eb4c60b5b79067faa3ddb1.png

3.半年前禁用的时间范围

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. pickerOptions: {
  6. //半年前禁用
  7. disabledDate(v) {
  8. return v.getTime() < new Date().getTime() - 86400000*183;
  9. }
  10. }
  11. }
  12. }
  13. </script>

发表评论

表情:
评论列表 (有 0 条评论,170人围观)

还没有评论,来说两句吧...

相关阅读