Insert dates into input type=date not possible

Question

I try to insert date from one column into date field of class .choice but can't do this. When I return date field length then it shows 10 signs so it's ok. Date field also allows 10 signs to be input.

        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime? PaymentDate { get; set; }

View:

       <tr>
            <td class="payment">
                @Html.DisplayFor(modelItem => item.PaymentDate)
            </td>
            <td>
                <select id="decisionList">
                    <option value="0" selected></option>
                    <option value="1">None</option>
                </select>
            </td>

            <td class="choice"></td>

       </tr>

JS:

document.querySelectorAll("#decisionList").forEach(elem => elem.addEventListener("change", function () {

    var selectedOptionIndex = this.options[this.selectedIndex].index;
    var invoiceDateText = this.closest('tr').querySelector('.payment').textContent.trim();
    var finalChoice = this.closest('tr').querySelector('.choice');

    alert(invoiceDateText.length); //returns 10 signs so it's ok


    switch (selectedOptionIndex) {

        case 0:
            finalChoice.innerHTML = '<input type="date">'
            break;

        case 1:
            finalChoice.innerHTML = '<input type="date" value="' + invoiceDateText + '">' // and here doesn't show the date from invoiceDateText
            break;

        default:

            finalChoice.innerHTML = ''

    }}));

I'm a little confused as to what it is you're trying to do. Are you trying to pass a date value into an date input? I don't believe this is possible as that would technically be a default value and html date inputs don't allow default values. — Zach Pedigo, Oct 20 '20 at 15:27
Yes, I'm trying to do so -pass date value into date input. I did it usung jQuery and it works but doesn't work with JS.. — Muska, Oct 20 '20 at 15:29
I'll have to check but I don't think it's possible in JS. I'll get back to you. — Zach Pedigo, Oct 20 '20 at 15:30
Check this out: https://stackoverflow.com/questions/14245339/pre-populating-date-input-field-with-javascript — Zach Pedigo, Oct 20 '20 at 15:31
@ZachPedigo yes and no, it was a good hint but I did it differently and it works fine;) — Muska, Oct 23 '20 at 16:42
Could you post the answer to your question on this page so that others can see it? Or link to another page if you found that it is a duplicate. — Zach Pedigo, Nov 03 '20 at 02:13

score 0 · Answer 1 · answered Nov 03 '20 at 15:50

I found an answer to my question. The issue was that I used html helper in View and tried to insert simple input in html helper code. Crucial line to change was:

finalChoice.innerHTML = '<input class="form-control datepicker" id="item_PaymentDate" name="item.PaymentDate" type="date" value="' + invoiceDateText + '">'

You can always check how html helper code looks like when press F12 and inspect your website code

Insert dates into input type=date not possible

1 Answers1