locked
Visibility options for timePicker control RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    1
    Sign in to vote

    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