title: How to Make Default Date 2 weeks from the current date in Typescript Date Picker? Vue.js, Typescript
body: <p>Greetings all and pardon my novice for I am just a beginner. I am looking to add a default date to my date picker box, but I have no clue as where to even begin. If any advice could be spared it would be greatly appreciated. As of now the date box displays absolutely nothing unless clicked and fed an input. I do not know how to set a default to the date and I am using Vue3 datepicker, typescript, sass, and html. I'm assuming it could be something along the lines of let d = new Date(); this.date = d + 14; or something. Again, I am completely lost so any advice would greatly help</p>
  <p>Here is the code that will pertain to this problem ,</p>
  <pre><code>&lt;template&gt;
    &lt;RouterItem&gt;
      &lt;div id=&quot;content&quot;&gt;
        &lt;span id=&quot;header&quot;&gt;The Basics&lt;/span&gt;
        &lt;div style=&quot;grid-area: name;&quot; class=&quot;body&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; /&gt;
        &lt;/div&gt;
        
        &lt;div style=&quot;grid-area: jobNumber;&quot; class=&quot;body&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Job Number&quot; /&gt;
        &lt;/div&gt;
      
        &lt;div id=&quot;dueDateBox&quot;&gt;
          &lt;label for=&quot;dueDateBox&quot;&gt;Due Date&lt;/label&gt;
          &lt;Datepicker
            autoApply
            :enableTimePicker=&quot;false&quot;
            inputClassName=&quot;dp-custom-input-date-section&quot;
            :clearable=&quot;false&quot;
            style=&quot;grid-area: dueDate;&quot;
          &gt;&lt;/Datepicker&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/RouterItem&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue';
  
  import Datepicker from 'vue3-date-time-picker';
  import contenteditable from &quot;vue-contenteditable&quot;;
  import RouterItem from &quot;../components/RouterItem.vue&quot;;
  import { mapStores } from 'pinia';
  import { useDisplayStore } from '../stores/display-store';
  
  export default defineComponent({
    name: &quot;OrderBasic&quot;,
    emits: [&quot;update:modelValue&quot;],
    components: {
      RouterItem,
      Datepicker,
      contenteditable,
    },
    computed: {
      ...mapStores(useDisplayStore),
    },
    methods: {
  
    },
    async mounted() {
      this.displayStore.nextButtonText = &quot;Next&quot;
      this.displayStore.nextDisabled = false
      
    },
    data() {
      return {
        format: (date: Date) =&gt; {
          const day = date.getDate();
          const month = date.getMonth() + 1;
          const year = date.getFullYear();
          return `${month}/${day}/${year}`;
        }
      }
    },
  
  });
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  #content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      &quot;header header&quot;
      &quot;name name&quot;
      &quot;jobNumber jobNumber&quot;
      &quot;dueDate dueDate&quot;;
  }
  &lt;/style&gt;
  
  &lt;style lang=&quot;sass&quot; scoped&gt;
  
  #content
    position: relative
    justify-items: center
    border-radius: 1rem
    gap: 2rem
    padding: 2rem 0
  
  #header
    display: flex
    flex-direction: row
    font-size: 1.6rem
    grid-area: header
    text-decoration: underline
    text-decoration-color: #D3D3D3
  .body
    background-color: white
    color: $primary-text-color
    font-size: 1rem
    border: 1px solid transparentize($primary-text-color, .7)
    border-radius: .25rem
    width: 15rem
    min-height: 1rem
    padding: .375rem .75rem
    transform: scale(130%, 130%)
  
  #dueDateBox
    grid-area: dueDate
    text-align: center
    background-color: #fff
    color: $secondary-text-color
    font-size: 1rem
    border: 1px solid transparentize($primary-text-color, .7)
    border-radius: .25rem
    width: 15rem
    min-height: 1rem
    padding: .375rem .75rem
    transform: scale(130%, 130%)
    transition: 150ms ease-in-out
    transition-property: border-color, box-shadow
    text-size: 1rem
    &amp;:focus
      border-color: transparentize($secondary-color, .75)
      box-shadow: 0 0 0 .25rem transparentize($secondary-color, .75)
  &lt;/style&gt;
  </code></pre>