locked
Visibility options for timePicker control

    Question

  • I want to display a timePicker control only when user needs it. Show I'm using css to show/hide it. Following html and css shows the structure of elements in the page.
    <div id="timer" class="showTime hidden">
    				<div id="timeDiv" data-win-control="WinJS.UI.TimePicker" data-win-options="{ clock : '24HourClock', current: '00:00:00'}" ></div>
                    <div id="timerName"><label for="label">Label</label><input type="text" id="label" /></div>
                    <div id="soundsList"><label for="listOfSounds">Sound</label><select id="listOfSounds">
    <div>
    CSS Part:
    div.hidden, div.hidden > * {
    	display: none;
    }
    div.show, div.show > * {
    	display: inline;
    }
    When I add js like, timer.className = 'show', it shows divs inside timer except timePicker control. Why that timePicker is not showing up?
    Thursday, April 11, 2013 5:56 PM

Answers

  • Hi,

    I copied your code and it works for me, not sure why it is not working for me.

    Do you have a WinJS.UI.ProcessAll() method ? That can be the issue, I can think of.

    BTW you are replacing the class name. You can just remove the hidden. Also use the utilities class of WinJS + to add/remove class names.

    Try this

    HTML:

    <div id="timer" class="showTime hidden">
    				<div id="timeDiv" data-win-control="WinJS.UI.TimePicker" data-win-options="{ clock : '24HourClock', current: '00:00:00'}" ></div>
                    <div id="timerName"><label for="label">Label</label><input type="text" id="label" /></div>
                    <div id="soundsList"><label for="listOfSounds">Sound</label><select id="listOfSounds"></select></div>
        </div>

    CSS :

    .hidden {
    	display: none;
    }
    .showTime {
    	display: inline;
    }

    JS

    WinJS.UI.processAll().then(

    function() {

    var timer = document.body.querySelector(".showTime"); WinJS.Utilities.removeClass(timer, "hidden");

    });


    - Girija

    • Edited by Girija Beuria Thursday, April 11, 2013 11:22 PM
    • Marked as answer by Song Tian Thursday, April 18, 2013 8:56 AM
    Thursday, April 11, 2013 10:06 PM