David-Mulder / paper-date-picker

A date picker à la Material Design
GNU General Public License v3.0
66 stars 21 forks source link

Silly Question : What should I do to get selected date value? #8

Open limitleem opened 9 years ago

limitleem commented 9 years ago

if I add this to . html

<paper-date-picker-dialog id="#startPicker" value="2000/1/1">
</paper-date-picker-dialog>

what should I do to get selected date? I try

$('#startPicker').attr( "value" );

but it only return the initial date set (2000/1/1). If I pick new date, it still 2000/1/1.

I know It must be a way to get this value (since no one complaint about it) but I just don't know how, I try to look at .fire but it only fire "selection-changed". It will be grateful if you could show me a way.

gwesio commented 9 years ago

I simply bind variable to the value and use value directly in my code:

    <paper-date-picker-dialog id="#startPicker" value="{{date}}">
limitleem commented 9 years ago

Hi gwesio, I took your advice and It doesn't work. Am I missing something?

<paper-date-picker-dialog locale="th-TH" id="startPicker" value="{{date}}"></paper-date-picker-dialog>
document.querySelector('#startPicker').addEventListener('selection-changed', function(e) {
        console.log(e.type);
       alert($('#startPicker').attr( "value" ));
    });

It alert as String "{{date}}".

gwesio commented 9 years ago

This is not what I ment. When you use it inside polymer-element or if you have it wrapped inside auto-binding you should be able just to use 'date' variable. Can you post your code on pastebin or jsfiddle?

yellek commented 9 years ago

I am having the same issue and I am sure it is because I am missing something obvious. Would it be possible to get an example of a date picker dialog that sets the value of a text input element?

Here is my non working code:

<html>
    <head>
        <title>Picker Test</title>
    </head>
    <body>
        <form action="/events/add/initial/">
            <paper-date-picker-dialog id="startDatePicker" value="2015/04/01"></paper-date-picker-dialog>
            <label for="possibleStartDate">First Possible Date:</label><input name="possibleStartDate" type="text" id="possibleStartDate" onclick="document.querySelectorAll('paper-date-picker-dialog')[0].open()"/>
        </form>
        <script>
            window.addEventListener('polymer-ready', function(e) {
                var picker = document.getElementById("possibleStartDate")
                picker.addEventListener("on-selection-changed", function(e) {
                    console.log("start selection-changed");
                });
            });
        </script>
    </body>
</html>