Vue UI Components Documentation

Sets or gets the type of the animation.

'fade'

'slide'

'none'

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :animationType="'fade'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the animationType property.

let animationType = this.$refs.myDateTimeInput.animationType;

Determines whether Null is allowed as a value.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :allowNullDate="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
        this.$refs.myDateTimeInput.val(null);
    }
  }
</script>

Get the allowNullDate property.

let allowNullDate = this.$refs.myDateTimeInput.allowNullDate;

Determines whether Backspace and Delete keys are handled by the widget.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :allowKeyboardDelete="false"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the allowKeyboardDelete property.

let allowKeyboardDelete = this.$refs.myDateTimeInput.allowKeyboardDelete;

Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :clearString="'Clear'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the clearString property.

let clearString = this.$refs.myDateTimeInput.clearString;

Sets or gets the jqxDateTimeInput's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :culture="'de-DE'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the culture property.

let culture = this.$refs.myDateTimeInput.culture;

Specifies the animation duration of the popup calendar when it is going to be hidden.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :closeDelay="2000"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the closeDelay property.

let closeDelay = this.$refs.myDateTimeInput.closeDelay;

Sets or gets whether or not the popup calendar must be closed after selection.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :closeCalendarAfterSelection="false"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the closeCalendarAfterSelection property.

let closeCalendarAfterSelection = this.$refs.myDateTimeInput.closeCalendarAfterSelection;

Sets the DropDown's alignment.

'left'

right'

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :dropDownHorizontalAlignment="'right'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the dropDownHorizontalAlignment property.

let dropDownHorizontalAlignment = this.$refs.myDateTimeInput.dropDownHorizontalAlignment;

Sets or gets the DropDown's alignment.

'top'

'bottom'

<template>
  <JqxDateTimeInput ref="myDateTimeInput" style="margin-top: 250px;"
    :width="250" :height="30" :dropDownVerticalAlignment="'top'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the dropDownVerticalAlignment property.

let dropDownVerticalAlignment = this.$refs.myDateTimeInput.dropDownVerticalAlignment;

Determines whether the widget is disabled.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :disabled="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myDateTimeInput.disabled;

When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :enableBrowserBoundsDetection="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the enableBrowserBoundsDetection property.

let enableBrowserBoundsDetection = this.$refs.myDateTimeInput.enableBrowserBoundsDetection;

This setting enables the user to select only one symbol at a time when typing into the text input field.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :enableAbsoluteSelection="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the enableAbsoluteSelection property.

let enableAbsoluteSelection = this.$refs.myDateTimeInput.enableAbsoluteSelection;

Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :firstDayOfWeek="3"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the firstDayOfWeek property.

let firstDayOfWeek = this.$refs.myDateTimeInput.firstDayOfWeek;

Sets or gets the date time input format of the date.

'd'-the day of the month

'dd'-the day of the month

'ddd'-the abbreviated name of the day of the week

'dddd'-the full name of the day of the week

'h'-the hour, using a 12-hour clock from 1 to 12

'hh'-the hour, using a 12-hour clock from 01 to 12

'H'-the hour, using a 24-hour clock from 0 to 23

'HH'-the hour, using a 24-hour clock from 00 to 23

'm'-the minute, from 0 through 59

'mm'-the minutes,from 00 though59

'M'-the month, from 1 through 12;

'MM'-the month, from 01 through 12

'MMM'-the abbreviated name of the month

'MMMM'-the full name of the month

's'-the second, from 0 through 59

'ss'-the second, from 00 through 59

't'-the first character of the AM/PM designator

'tt'-the AM/PM designator

'y'-the year, from 0 to 99

'yy'-the year, from 00 to 99

'yyy'-the year, with a minimum of three digits

'yyyy'-the year as a four-digit number

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :formatString="'d'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the formatString property.

let formatString = this.$refs.myDateTimeInput.formatString;

Sets or gets the height of the jqxDateTimeInput widget.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the height property.

let height = this.$refs.myDateTimeInput.height;

Sets or gets the jqxDateTimeInput's minumun date.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :min="min" :max="max"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    data: function () {
      return {
      min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
      }
    }
  }
</script>

Get the min property.

let min = this.$refs.myDateTimeInput.min;

Sets or gets the jqxDateTimeInput's maximum date.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :min="min" :max="max"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    data: function () {
      return {
      min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
      }
    }
  }
</script>

Get the max property.

let max = this.$refs.myDateTimeInput.max;

Specifies the animation duration of the popup calendar when it is going to be displayed.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :openDelay="2000"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the openDelay property.

let openDelay = this.$refs.myDateTimeInput.openDelay;

Determines the widget's place holder displayed when the widget's value is null.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :placeHolder="'Null Value'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the placeHolder property.

let placeHolder = this.$refs.myDateTimeInput.placeHolder;

Sets or gets the popup's z-index.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :popupZIndex="99999"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the popupZIndex property.

let popupZIndex = this.$refs.myDateTimeInput.popupZIndex;

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :rtl="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myDateTimeInput.rtl;

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :readonly="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Sets or gets a value indicating whether the dropdown calendar's footer is displayed.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :showFooter="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the showFooter property.

let showFooter = this.$refs.myDateTimeInput.showFooter;

Sets or gets the dropdown calendar's selection mode.

'none'

'default'

'range'

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :selectionMode="'range'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the selectionMode property.

let selectionMode = this.$refs.myDateTimeInput.selectionMode;

Sets or gets a value whether the week`s numbers are displayed.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :showWeekNumbers="false"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the showWeekNumbers property.

let showWeekNumbers = this.$refs.myDateTimeInput.showWeekNumbers;

Determines whether the time button is visible.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :showTimeButton="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the showTimeButton property.

let showTimeButton = this.$refs.myDateTimeInput.showTimeButton;

Determines whether the calendar button is visible.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :showCalendarButton="false"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the showCalendarButton property.

let showCalendarButton = this.$refs.myDateTimeInput.showCalendarButton;

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :theme="'material'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the theme property.

let theme = this.$refs.myDateTimeInput.theme;

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :template="'primary'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the template property.

let template = this.$refs.myDateTimeInput.template;

Sets or gets the position of the text.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :textAlign="'right'"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the textAlign property.

let textAlign = this.$refs.myDateTimeInput.textAlign;

Sets or gets the 'Today' string displayed in the dropdown Calendar when the 'showFooter' property is true.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :todayString="'Today'" :showFooter="true"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the todayString property.

let todayString = this.$refs.myDateTimeInput.todayString;

Sets or gets the jqxDateTimeInput value.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30" :value="value"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    data: function () {
      return {
        value: new Date(2019, 0, 10)
      }
    }
  }
</script>

Get the value property.

let value = this.$refs.myDateTimeInput.value;

Sets or gets the width of the jqxDateTimeInput widget.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    }
  }
</script>

Get the width property.

let width = this.$refs.myDateTimeInput.width;

This event is triggered on blur when the value is changed .

Code examples

Bind to the change event of jqxDateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput" @change="onChange($event)"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popup calendar is closed.

Code examples

Bind to the close event of jqxDateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput" @close="onClose($event)"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popup calendar is opened.

Code examples

Bind to the open event of jqxDateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput" @open="onOpen($event)"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the text is changed.

Code examples

Bind to the textchanged event of jqxDateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput" @textchanged="onTextchanged($event)"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    methods: {
      onTextchanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxDateTimeInput.

<template>
  <JqxDateTimeInput ref="myDateTimeInput" @valueChanged="onValueChanged($event)"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    methods: {
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

After calling this method, the popup calendar will be hidden.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
export default {
  components: {
    JqxDateTimeInput
  },
  mounted: function() {
    this.$refs.myDateTimeInput.open();
    setTimeout(() => {
      this.$refs.myDateTimeInput.close();
    }, 1500);
  }
};
</script>

Destroys the widget.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.focus();
    }
  }
</script>

Gets the selection range when the selectionMode is set to 'range'. The returned value is an object with "from" and "to" fields. Each of the fields is a JavaScript Date object.

<template>
  <div>
    <JqxDateTimeInput ref="myDateTimeInput"
      :width="250" :height="30"
      :selectionMode="'range'"
    />
    <br/>
    <JqxButton @click="onClick($event)" :width="60" :height="20">Click</JqxButton>
  </div>
</template>
 
<script>
import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
export default {
  components: {
    JqxDateTimeInput,
    JqxButton
  },
  mounted: function() {
    this.$refs.myDateTimeInput.setRange(new Date(2017, 9, 20), new Date(2017, 9, 24));
  },
  methods: {
    onClick: function(event) {
      const value = this.$refs.myDateTimeInput.getRange();
      console.log(value);
    }
  }
};
</script>

Returns the input field's text.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      const value = this.$refs.myDateTimeInput.getText();
    }
  }
</script>

When the getDate method is called, the user gets the current date. The returned value is JavaScript Date object.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      const value = this.$refs.myDateTimeInput.getDate();
    }
  }
</script>

When the setMaxDate method is called, the user gets the maximum navigation date. The returned value is JavaScript Date object.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      const value = this.$refs.myDateTimeInput.getMaxDate();
    }
  }
</script>

When the getMinDate method is called, the user gets the minimum navigation date. The returned value is JavaScript Date object.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      const value = this.$refs.myDateTimeInput.getMinDate();
    }
  }
</script>

After calling this method, the popup calendar will be displayed.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.open();
    }
  }
</script>

Sets the selection range when the selectionMode is set to 'range'. The required parameters are JavaScript Date objects.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.selectionMode = 'range';
      this.$refs.myDateTimeInput.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
    }
  }
</script>

When the setMinDate method is called, the user sets the minimum date to which it is possible to navigate.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.setMinDate(new Date(2017, 9, 20));
    }
  }
</script>

When the setMaxDate method is called, the user sets the maximum date to which it is possible to navigate.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.setMaxDate(new Date(2017, 9, 20));
    }
  }
</script>

When the setDate method is called, the user sets the date. The required parameter is a JavaScript Date object.

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      this.$refs.myDateTimeInput.setDate(new Date(2017, 9, 20));
    }
  }
</script>

Gets or sets the jqxDateTimeInput's value.
Set value:
this.$refs.myDateTimeInput.val(new Date(2011, 10, 24));

Get value:
let date = this.$refs.myDateTimeInput.val();

<template>
  <JqxDateTimeInput ref="myDateTimeInput"
    :width="250" :height="30"
  />
</template>
 
<script>
  import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdatetimeinput.vue';
 
  export default {
    components: {
      JqxDateTimeInput
    },
    mounted: function () {
      const value = this.$refs.myDateTimeInput.val();
    }
  }
</script>