timerangepicker.html 942 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <style>
  2. </style>
  3. <div id="{$name}">
  4. <input type="hidden" name="{$name}" :value="value.join(',')">
  5. <el-time-picker
  6. is-range
  7. v-model="value"
  8. size="small"
  9. range-separator="至"
  10. start-placeholder="开始时间"
  11. end-placeholder="结束时间"
  12. placeholder="选择时间范围"
  13. value-format="HH:mm"
  14. style="width:100%"
  15. >
  16. </el-time-picker>
  17. </div>
  18. <script>
  19. new Vue({
  20. el: '#{$name}',
  21. data: function() {
  22. return {
  23. value: ['', '']
  24. }
  25. },
  26. watch: {
  27. value: function (newVal, oldVal) {
  28. $('input[name={$name}]').val(newVal.join(','));
  29. }
  30. },
  31. created(){
  32. const vals = '{$val}';
  33. if(vals){
  34. const arrs = vals.split(',');
  35. this.value = [arrs[0],arrs[1]];
  36. }
  37. }
  38. })
  39. </script>