Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Time picker AM/PM and features


HI!
I am trying to figure out what my options are for having a time picker with AM/PM instead of 24 hour time. I see that the one used in the Vue dashboard that I have uses ElementPlus and they don't seem to have the AM/PM feature (at least as far as I can tell).

Are there any other options available?

Also, is it possible to use the limit time range feature (disabledHours) of ElementPlus?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Add format="hh:mm:ss A" on your el-time-picker to use AM/PM time input.

Here is an example:

<el-time-picker v-model="value" placeholder="am/pm time input" format="hh:mm:ss A" />


To disable the range of hours you can still use the disabledHours property.


<el-time-picker
v-model="value"
placeholder="am/pm time input"
format="hh:mm:ss A"
:disabledHours="disabledHours"
/>

const makeRange = (start: number, end: number) => {
const result: number[] = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};

const disabledHours = () => {
// will return array to disable hours from midnight till 8AM
return makeRange(0, 8);
};


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(