JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Date & Time Pickers Web Component (TimePicker), toggle visibility

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101793
    gcatellier
    Member

    Hi,
    Trying to retrofit html web components into a internal tool at my company and I am having a hard time on a simple task where we click a “click Icon” and the Timepicker shows but this happens. (See below)
    Any Ideas Why I cannot simply (show/hide) the entire element and show it when a user clicks on a button/icon/trigger ?
    Any help would be awesome.
    Screen-Shot-2021-05-11-at-11-20-31-AM
     
    Thank you.

    #101798
    yavordashew
    Member

    Hi gcatellier,
    Unfortunately I was not able to reproduce the issue you have if you can create a code example for us it will be the best in order to give you the best solution.
    However I have made a little code snippet which showcases how to have similar functionality:
    In your HTML file:

        <smart-date-time-picker calendar-button enable-mouse-wheel-action drop-down-position="center-bottom" spin-buttons spin-buttons-position="left"></smart-date-time-picker>
        <button id='toggleElement'>  Toggle element</button>
        <!-- scripts -->
        <script type="module" src="../../../source/modules/smart.datetimepicker.js"></script>
        <script type="module" src="index.js"></script>
    	

    In your JS file:

    window.onload = ()=>{
        const button = document.getElementById('toggleElement'),
              datePicker = document.querySelector('smart-date-time-picker');
        button.addEventListener('click', () => {
            if ( datePicker.style.visibility === 'hidden' ) {
                datePicker.style.visibility = 'visible';
            }
            else {
                datePicker.style.visibility = 'hidden';
            }
        })
    }

    Let me know if that works for you!
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.