Member Avatar for dawbin

I cant find any decent examples of implementing the WinJS.UI.DatePicker control. Specifically I am not able to retrieve the "current" attribute from the "change" event. In my example below "eventInfo.current" is undefined?

    <h2>Date Picker Control</h2>
        <label for="datePickerDiv">
            Enter A Date:
        </label>
        <div id="date" data-win-control="WinJS.UI.DatePicker"></div>
        <div id="datePickerOutput"></div>

    //datePicker Control
    var date = document.getElementById("date");
    var datePicker = date.winControl;
    datePicker.addEventListener("change", dateChanged, false);

    function dateChanged(eventInfo) {
        var datePickerOutput = document.getElementById("datePickerOutput");
        datePickerOutput.innerText = "Selected Date: " + eventInfo.current + '.';
    }
Edited by dawbin
  • 2 Contributors
  • 2 Replies
  • 528 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dawbin

Dani AI

Generated

Quick summary and root cause: the change handler receives the DOM event object — it does not carry the DatePicker control’s current value as eventInfo.current. The selected date is exposed on the control instance itself (the current property on the control you get from the host element’s winControl). This is why ’s eventInfo.current was undefined and why reading winControl.current (as you discovered) fixes it. (learn.microsoft.com)

A robust pattern for change handlers (avoids event.target hitting an inner select) is to use event.currentTarget.winControl. Example:

function dateChanged(e) {
  // the element the listener was attached to is e.currentTarget
  var picker = e.currentTarget && e.currentTarget.winControl;
  var selectedDate = picker && picker.current; // a JavaScript Date object
  var out = document.getElementById("datePickerOutput");
  out.innerText = selectedDate ? selectedDate.toLocaleDateString() : "no date";
}

Use e.currentTarget because e.target can be an inner select element that the control renders; currentTarget is the host element the listener was bound to. Also remember you can keep a reference to the control in closure scope if that fits your structure. (learn.microsoft.com)

Extra tips and cautions: if you declare the control with data-win-control make sure WinJS has processed the markup (call/use the promise returned by WinJS.UI.processAll() or use Page control lifecycle) before accessing .winControl. The DatePicker’s current is a JS Date (WinJS’s implementation sets the stored time to midday to avoid timezone/DST side-effects), so format or serialize it before saving. For roaming/local settings prefer serializing (for example date.toISOString() or date.getTime()) rather than assuming complex objects will round-trip — roaming settings expect primitive/WinRT types and simple values. (learn.microsoft.com)

Good catch, , and good question from about instantiation — once the control exists, winControl.current is the canonical place to read the selected date.

Recommended Answers

All 2 Replies

Member Avatar for hericles

Is current undefined or is eventInfo?
Where are you creating the datepicker object? E.g. where is this line:
var datePicker = new WinJS.UI.DatePicker(element, options);
I only looked into this briefly just now so what I'm asking is, is line 8 and 9 in your code the same as the object instantiation above?

Member Avatar for dawbin

I figured it out, was working from a bad sample code...

    function birthChanged(eventInfo) {

        //save roaming data
        var birth = document.getElementById("birth");
        var datePicker = birth.winControl;
        var appData = Windows.Storage.ApplicationData.current
        var roamingSettings = appData.roamingSettings;
        roamingSettings.values["birth"] = datePicker.current;

    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.