https://mobiscroll.com/docs/assets/js/770336d0.3d2563aa.js

1"use strict";(globalThis.webpackChunkmobiscroll_docs=globalThis.webpackChunkmobiscroll_docs||[]).push([[8989],{27747(e,n,t){t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>p});const i=JSON.parse('{"id":"vue/datepicker/customizing-the-input","title":"Customizing the input","description":"Customize the input element used by the Mobiscroll Datepicker in Vue \u2014 custom triggers, inline rendering, and anchor elements.","source":"@site/versioned_docs/version-6.1.0/vue/datepicker/customizing-the-input.md","sourceDirName":"vue/datepicker","slug":"/vue/datepicker/customizing-the-input","permalink":"/docs/vue/datepicker/customizing-the-input","draft":false,"unlisted":false,"tags":[],"version":"6.1.0","sidebarPosition":10,"frontMatter":{"sidebar_position":10,"sidebar_label":"Customizing the input","displayed_sidebar":"vueSidebar","title":"Customizing the input","description":"Customize the input element used by the Mobiscroll Datepicker in Vue \u2014 custom triggers, inline rendering, and anchor elements."},"sidebar":"vueSidebar","previous":{"title":"Templating","permalink":"/docs/vue/datepicker/templating"},"next":{"title":"Accessibility","permalink":"/docs/vue/datepicker/accessibility"}}');var s=t(74848),r=t(28453);const o={sidebar_position:10,sidebar_label:"Customizing the input",displayed_sidebar:"vueSidebar",title:"Customizing the input",description:"Customize the input element used by the Mobiscroll Datepicker in Vue \u2014 custom triggers, inline rendering, and anchor elements."},c=void 0,l={},p=[{value:"Overview",id:"overview",level:2},{value:"Using without inputs",id:"using-without-inputs",level:2},{value:"Using with one input",id:"using-with-one-input",level:2},{value:"Using with two inputs",id:"using-with-two-inputs",level:2}];function a(e){const n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,s.jsx)(n.p,{children:"The datepicker, as explained below, can be used with one, two or no inputs."}),"\n",(0,s.jsx)(n.h2,{id:"using-without-inputs",children:"Using without inputs"}),"\n",(0,s.jsxs)(n.p,{children:["The first choice of input customization is to have no inputs at all. In this case rendering the component in ",(0,s.jsx)(n.a,{href:"/vue/datepicker/display-modes",children:"inline display"})," mode will leave out the use of inputs."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",metastring:'title="Inline picker"',children:'<template>\n  <MbscDatepicker\n    display="inline"\n    :controls="[\'calendar\']"\n    :touchUi="true"\n  />\n</template>\n'})}),"\n",(0,s.jsx)(n.h2,{id:"using-with-one-input",children:"Using with one input"}),"\n",(0,s.jsx)(n.p,{children:"The datepicker component will render a Mobiscroll Input by default. This input will hold the formatted value after selection."}),"\n",(0,s.jsxs)(n.p,{children:["Using a custom input can be done with the ",(0,s.jsx)(n.code,{children:"inputComponent"})," ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-inputComponent",children:"prop"}),". In this case the datepicker will render the component provided and pass the formatted value to it."]}),"\n",(0,s.jsxs)(n.p,{children:["To pass props to the custom component, you can use the ",(0,s.jsx)(n.code,{children:"inputProps"})," ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-inputProps",children:"prop"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",metastring:'title="Using with one input"',children:'<script setup>\nimport { ref } from \'vue\';\nimport \'@mobiscroll/vue/dist/css/mobiscroll.min.css\';\n\nconst isPickerOpen = ref(false)\nfunction openPicker() {\n  isPickerOpen.value = true\n}\nfunction handleClose() {\n  isPickerOpen.value = false\n}\n<\/script>\n\n<template>\n  <MbscDatepicker\n    inputComponent="input"\n    :controls="[\'calendar\']"\n    :touchUi="true"\n    :showOnClick="false"\n    :showOnFocus="false"\n    :isOpen="isPickerOpen"\n    @close="handleClose"/>\n  <MbscButton @click="openPicker">Show picker</MbscButton>\n</template>\n'})}),"\n",(0,s.jsx)(n.h2,{id:"using-with-two-inputs",children:"Using with two input

1s"}),"\n",(0,s.jsxs)(n.p,{children:["When selecting a range, you have basically two values to display: the start of the range and the end of the range. These can be shown in different inputs using the ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-startInput",children:(0,s.jsx)(n.code,{children:"startInput"})})," and the ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-endInput",children:(0,s.jsx)(n.code,{children:"endInput"})})," options."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",metastring:'title="Two inputs for range selection"',children:'<script setup>\nimport { ref } from \'vue\';\nimport \'@mobiscroll/vue/dist/css/mobiscroll.min.css\';\n\nconst startInput = ref(null)\nconst endInput = ref(null)\n<\/script>\n<template>\n  <MbscInput\n    ref="startInput"\n    label="Start"\n    placeholder="Please Select..." />\n  <MbscInput\n    ref="endInput"\n    label="End"\n    placeholder="Please Select..." />\n  <MbscDatepicker\n    select="range"\n    :startInput="startInput"\n    :endInput="endInput" />\n</template>\n'})}),"\n",(0,s.jsxs)(n.p,{children:["When the ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-startInput",children:(0,s.jsx)(n.code,{children:"startInput"})})," and the ",(0,s.jsx)(n.a,{href:"/vue/datepicker/api#opt-endInput",children:(0,s.jsx)(n.code,{children:"endInput"})})," options are provided, the datepicker will not render any other inputs. It will open when these inputs are focused/clicked instead."]})]})}function u(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},28453(e,n,t){t.d(n,{R:()=>o,x:()=>c});var i=t(96540);const s={},r=i.createContext(s);function o(e){const n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);