当前位置:   article > 正文

element ui DateTimePicker 日期选择器自定义多种快捷选项_el-datetime-picker

el-datetime-picker

element ui DateTimePicker 日期区间选择器,自定义快捷选项功能, 定义了最近一小时、昨天、今天、本月、上个月、最近一周、最近一个月、最近三个月 多种快捷选项。

  1. <template>
  2. <el-date-picker
  3. v-model="filterTime"
  4. type="datetimerange" //显示类型 日期区间选择
  5. :picker-options="pickerOptions"
  6. range-separator="至"
  7. start-placeholder="开始日期"
  8. end-placeholder="结束日期"
  9. format="yyyy-MM-dd HH:mm:ss" //显示在输入框中的格式
  10. value-format="yyyy-MM-dd HH:mm:ss" //绑定值的格式
  11. :default-time="['00:00:00', '23:59:59']" //选中日期后的默认具体时刻
  12. align="right">
  13. </el-date-picker>
  14. </template>
  15. <script>
  16. data(){
  17. return{
  18. pickerOptions: {
  19. shortcuts: [
  20. {
  21. text: '最近一小时',
  22. onClick(picker) {
  23. const end = new Date(); // 结束时间为当前时间
  24. const start = new Date(end.getTime() - 3600000); // 开始时间为当前时间减去一小时
  25. picker.$emit('pick', [start, end]);
  26. }
  27. },
  28. {
  29. text: '今日',
  30. onClick(picker) {
  31. const start = new Date();
  32. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  33. const end = new Date();
  34. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  35. picker.$emit('pick', [start, end]);
  36. }
  37. },
  38. {
  39. text: '昨日',
  40. onClick(picker) {
  41. const start = new Date();
  42. start.setDate(start.getDate() - 1); // 设置为昨天
  43. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  44. const end = new Date();
  45. end.setDate(end.getDate() - 1);
  46. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  47. picker.$emit('pick', [start, end]);
  48. }
  49. },
  50. {
  51. text: '本月',
  52. onClick(picker) {
  53. const start = new Date();
  54. start.setDate(1); // 设置为本月的第一天
  55. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  56. const end = new Date(); // 本月的今天
  57. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  58. picker.$emit('pick', [start, end]);
  59. }
  60. },
  61. {
  62. text: '上个月',
  63. onClick(picker) {
  64. const start = new Date();
  65. start.setMonth(start.getMonth() - 1); // 设置为上个月的第一天
  66. start.setDate(1);
  67. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  68. const end = new Date();
  69. end.setDate(0); // 设置为上个月的最后一天
  70. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  71. picker.$emit('pick', [start, end]);
  72. }
  73. },{
  74. text: '最近一周',
  75. onClick(picker) {
  76. const end = new Date();
  77. const start = new Date();
  78. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  79. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  80. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  81. picker.$emit('pick', [start, end]);
  82. }
  83. }, {
  84. text: '最近一个月',
  85. onClick(picker) {
  86. const end = new Date();
  87. const start = new Date();
  88. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  89. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  90. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  91. picker.$emit('pick', [start, end]);
  92. }
  93. }, {
  94. text: '最近三个月',
  95. onClick(picker) {
  96. const end = new Date();
  97. const start = new Date();
  98. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  99. start.setHours(0, 0, 0, 0); // 设置为00:00:00
  100. end.setHours(23, 59, 59, 999); // 设置为23:59:59
  101. picker.$emit('pick', [start, end]);
  102. }
  103. }]
  104. },
  105. }
  106. }
  107. </script>

效果图:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/737935
推荐阅读
相关标签
  

闽ICP备14008679号