How to set default value to range Date picker? about vue-persian-datepicker

[hamed-bolhasani]

change the function to this:

toUTC(value){
   if(Array.isArray(value))
      return value.map(date => moment.from(date).format("YYYY-MM-DD HH:mm"))
   return moment.from(value).format("YYYY-MM-DD HH:mm")
}

Thank you for Your answer.

[alireza-ab]

Hi @hamed2867

With this way:

<date-picker v-model="date" type="datetime" />

data() {
    return {
        date: ['2022-02-20 19:13', '2022-02-21 19:13']
    }
}

[hamed-bolhasani]

thank you for your answer, I create Component from your datePicker as below:

<template>
  <div>
  <date-picker
    :key="keyToUpdate"
    :value="value ? toUTC(value) : null"
    :mode="mode"
    :type="type"
    :column="column"
    :locale="locale"
    :autoSubmit = "autoSubmit"
    :locale-config="type === 'datetime' ? {
      fa: {
        inputFormat: 'jYYYY/jMM/jDD HH:mm',
      },
      en: {
        format: 'YYYY-MM-DD HH:mm',
      },
    } : {
      fa: {
        inputFormat: 'jYYYY/jMM/jDD',
      },
      en: {
        format: 'YYYY-MM-DD',
      },
    }"
    click-on="all"
    format="YYYY-MM-DD HH:mm"
    :to="to"
    :from="from"
    clearable
    :show="false"
    :auto-submit="false"
    :id="`date-picker-${value}`"
    class="form-control p-0"
    style="height: 32px"
      @select="selected"
  >
    <!-- v-model="dateOfBirth" -->
    <template v-if="value" #clear>
      <b-icon @click="$emit('input', null );" scale="2" aria-hidden="true" icon="x"></b-icon>
    </template>

  </date-picker>
  </div>
</template>

<script>
import datePicker from "@alireza-ab/vue-persian-datepicker";
import moment from "jalali-moment";
import dateFormat from "@/mixins/dateFormat";

export default {
  data(){
    return {
      keyToUpdate:0,
      dateInfo: []
    }
  },
  components: { datePicker },
  methods: {
    selected(value){
      let dateInfo;
        if (this.mode === "single") {
          dateInfo = value.d.year + "/" + value.d.month + "/" + value.d.date + ' ' + value.d.hour + ':' + value.d.minute + ':' + value.d.second;
          if (value.c === "jalali") {
            dateInfo = this.toUTC(this.toGreg(dateInfo));
          }
        } else {
          this.dateInfo.push(value)
          if (this.dateInfo.length > 1) {
            dateInfo = []
            this.dateInfo.forEach((v, index) => {
              dateInfo[index] = v.d.year + "/" + v.d.month + "/" + v.d.date + ' ' + v.d.hour + ':' + v.d.minute + ':' + v.d.second;
              if (v.c === "jalali") {
                dateInfo[index] = this.toUTC(this.toGreg(dateInfo[index]));
              }
            });
          }
          }
        this.$emit("select", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
        this.$emit("input", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
    },
    dateInput(value) {
      let dateInfo;
      // if (value){
      if (this.mode === "single") {
        dateInfo = value.d.year + "/" + value.d.month + "/" + value.d.date + ' ' + value.d.hour + ':' + value.d.minute + ':' + value.d.second;
        if (value.c === "jalali") {
          dateInfo = this.toUTC(this.toGreg(dateInfo));
        }
      } else {
        dateInfo = [];
        value.forEach((v, index) => {
          dateInfo[index] = v.d.year + "/" + v.d.month + "/" + v.d.date + ' ' + v.d.hour + ':' + v.d.minute + ':' + v.d.second;
          if (v.c === "jalali") {
            dateInfo[index] = this.toUTC(this.toGreg(dateInfo[index]));
          }
        });
      }
      // this.$emit("input", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
    },
  },
  mixins: [dateFormat],
  props: {
    to: {
      default:  moment.from(new Date()).locale("fa").format("YYYY/MM/DD"),
      // default: moment.from(new Date()).locale("en").format("YYYY MM  DD, hh:mm:ss")
    },
    from: {
      default: '1300',
      // default: moment.from(new Date()).locale("en").format("YYYY MM  DD, hh:mm:ss")
    },
    locale: {
      default: "fa,en",
    },
    column: {
      default: 1,
    },
    mode: {
      default: "single",
    },
    type: {
      default: "date",
    },
    toIso: {
      default: true,
      type : Boolean
    },
    value: {
      //  default: moment.from(new Date()).locale("en").format("YYYY MM  DD, hh:mm:ss")
      default: null,
    },
    autoSubmit: {
      default: false,
    },
    timezone: {
      default: false,
    },
  },
  watch:{
    // value(){
    //   if (this.value === '' || this.value === null){
    //     this.keyToUpdate++;
    //   }
    // }
  }
};
</script>

And call it as:

              <my-ab-date-picker
                  :mode="'range'"
                  :type="'datetime'"
                  :locale="'fa,en'"
                  click-on="all"
                  clearable
                  :show="false"
                  :auto-submit="true"
                  :column="2"
                  v-model="searchDate"
                  :toIso="false"
              >

and in data:

data() {
    return {
               searchDate: ['2022-02-20 19:13', '2022-02-21 19:13'],
         }
}

but it doesn't work and (Error in mounted hook: "TypeError: e.some is not a function") showed
Do you have any idea for it?

[alireza-ab]

Could you also show me the toUTC function?

---

In addition, you can use PersianDate instead of moment to improve your code.

import datePicker, {PersianDate} from '@alireza-ab/vue-persian-datepicker'

documentation: https://alireza-ab.ir/persian-date

[hamed-bolhasani]

Could you also show me the toUTC function?

In addition, you can use PersianDate instead of moment to improve your code.

import datePicker, {PersianDate} from '@alireza-ab/vue-persian-datepicker'

documentation: https://alireza-ab.ir/persian-date

        toUTC(value) {
            return moment.from(value).format("YYYY-MM-DD HH:mm")
        },

[alireza-ab]

change the function to this:

toUTC(value){
   if(Array.isArray(value))
      return value.map(date => moment.from(date).format("YYYY-MM-DD HH:mm"))
   return moment.from(value).format("YYYY-MM-DD HH:mm")
}

[honarmanly]

I have the same requirement to set initial value while loading the page containing date-picker. but I need to set the value dynamically. in your example answer here you set the range statically. Is there any solution?

[alireza-ab]

Hi @honarmanly
Please read this #4.

[hamed-bolhasani]

I have the same requirement to set initial value while loading the page containing date-picker. but I need to set the value dynamically. in your example answer here you set the range statically. Is there any solution?

try this:

data() {
    return {
               searchDate: this.getDefaultDateItems(),
         }
},
  methods: {
    getDefaultDateItems(){
      let startDate = new Date();
      startDate.setHours(0, 0, 0);
      let endDate = new Date();
      endDate.setHours(23, 59, 59);
      return [startDate,endDate];
    },
}

and v-model your datepicker field on searchDate (for Example)