locked
Binding Datepicker value & Timepicker value to data-win-bind

    Question

  • Hi all,

    I have started creating metro app using HTML5/JavaScript. And created four controls. Two controls are for entering text value.Two other values are for Datepicker and Timepicker.

    I am able to bind the Text value and save it to a listview. But not able to save date value & time value.

    The code to create the controls is :-

     <form id="addForm">
                       
                          <label for="eventdate">
                              Event Date:
                              </label>
                        <div id="datepickeradd"  class="datepickeradd" data-win-control="WinJS.UI.DatePicker"  data-win-options="{current: '01/01/2013',maxYear:2040,minYear:2012}"></div>
                        <label>
                            Event Time:
                        </label>
                        <div id ="timepickeradd"  class="timepickeradd" data-win-control="WinJS.UI.TimePicker" data-win-options="{ current : value}"></div>
                                              
                    
                        <label>
                            Event Name :

                        </label>
                        <input type="text" class="name input-block" required />

                       <label>
                            Event Description:
                        </label>
                        <textarea class="description input-block"></textarea>

    </form>

    And have tried to retrieve the values entered by the user as:-

     <div class="item">
                <div data-win-bind="textContent: name" class="item-title"></div>
                <p data-win-bind="textContent: description" class="item-description"></p>
                <p data-win-bind= "textContent: datepickeradd" class="item-title"></p>
                <p data-win-bind="textContent: timepickeradd" class="item-title"></p>
            </div>

    I am able to retrieve "name' and 'Description' Correctly but Date Value & Time values shows "Undefined".

    Can You guys help me in solving the issue and retrieving the date, time value.

    Thanks for any kind of help.

    Vishwajeet.

    Friday, January 24, 2014 8:16 AM

Answers

  • Hi,

    There are some codes you can follow up:

    in html:

    <body>
        <p>Content goes here</p>
        <label for="eventdate">
            Event Date:
        </label>
        <div data-win-control="WinJS.UI.DatePicker" id="timepickeradd" data-win-options="{current: '01/01/2013',maxYear:2040,minYear:2012}"></div>
        <label>
            Event Name :
    
        </label>
        <input type="text" id="name input-block" required />
    
        <label>
            Event Description:
        </label>
        <textarea id="description input-block"></textarea>
        <div id="item" data-win-control="WinJS.Binding.Template">
    
            <div data-win-bind="textContent: name" class="item-title"></div>
            <p data-win-bind="textContent: description" class="item-description"></p>
            <p data-win-bind="textContent: datepickeradd" class="item-title"></p>
           
        </div>
        <div id="basicListView" data-win-control="WinJS.UI.ListView"
             data-win-options="{
        itemTemplate: select('#item')}"></div>
    </body>

    in js:

    app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function () {
                    var control = document.getElementById("name input-block");
                    var controll = document.getElementById("description input-block");
                    var datepicker = document.getElementById("timepickeradd").winControl;
                    var namevale = control.textContent.toString();
                    var descriptionvalue = controll.textContent.toString();
                    var datevalue = datepicker.current;
                    var dataArray = [{ name: namevale, description: descriptionvalue, datepickeradd: datevalue }];
                    var dataList = new WinJS.Binding.List(dataArray);
                    var listview = document.getElementById("basicListView").winControl;
                    listview.itemDataSource = dataList.dataSource;
                }));
      }
        };

    You can see Adding a ListView in winjs to get more information.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, January 27, 2014 9:20 AM