aPersianDatepicker.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. {{define "component/persianDatepickerTemplate"}}
  2. <template>
  3. <div>
  4. <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
  5. @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
  6. :placeholder="placeholder">
  7. <template #addonAfter>
  8. <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
  9. </template>
  10. </a-input>
  11. </div>
  12. </template>
  13. {{end}}
  14. {{define "component/aPersianDatepicker"}}
  15. <link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
  16. <script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
  17. <script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
  18. <script>
  19. const persianDatepicker = {};
  20. Vue.component('a-persian-datepicker', {
  21. props: {
  22. 'format': {
  23. type: undefined,
  24. required: false,
  25. },
  26. 'value': {
  27. type: String,
  28. required: false,
  29. },
  30. 'placeholder': {
  31. type: String,
  32. required: false,
  33. },
  34. },
  35. template: `{{template "component/persianDatepickerTemplate"}}`,
  36. data() {
  37. return {
  38. date: '',
  39. persianDatepicker,
  40. };
  41. },
  42. watch: {
  43. value: function (date) {
  44. this.date = this.convertToJalalian(date)
  45. }
  46. },
  47. mounted() {
  48. this.date = this.convertToJalalian(this.value)
  49. this.listenToDatepicker()
  50. },
  51. methods: {
  52. convertToGregorian(date) {
  53. return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
  54. },
  55. convertToJalalian(date) {
  56. return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
  57. },
  58. listenToDatepicker() {
  59. jalaliDatepicker.startWatch({
  60. time: true,
  61. zIndex: '9999',
  62. hideAfterChange: true,
  63. useDropDownYears: false,
  64. changeMonthRotateYear: true,
  65. });
  66. },
  67. }
  68. });
  69. </script>
  70. {{end}}