locked
input type="date" can't show value when my modal form start RRS feed

  • Question

  • User1268823346 posted

    hello,

    when my view start alla data are show correctly while when open my modal form with button i grid, only releaseDate field not show.

    Why ? Where is my error ?

    thanks

    stefano

    @model IEnumerable<Movie>
    
    @(Html
        .Grid(Model)
        .Build(columns =>
        {
            columns.Add(model => model.Title).Titled("Title");
            columns.Add(model => model.ReleaseDate).Titled("ReleaseDate").Formatted("{0:d}");
            columns.Add(model => model.Genre).Titled("Genre");
            columns.Add(model => model.Price).Titled("Price");
            columns.Add(model => $"<button data-id=\"{model.Id}\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\" " +
                $"data-title=\"{model.Title}\" data-releaseDate=\"{model.ReleaseDate}\" data-genre=\"{model.Genre}\" data-price=\"{model.Price}\">Edit</button>").Encoded(false);
        })
    )
    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="recipient-title" class="col-form-label">Title:</label>
                            <input type="text" class="form-control" id="recipient-title" name="title">
                            <input type="hidden" id="recipient-id" name="id" />
                        </div>
                        <div class="form-group">
                            <label for="recipient-releaseDate" class="col-form-label">ReleaseDate:</label>
                            <input type="date" class="form-control" id="recipient-releaseDate" name="releaseDate" />
                        </div>
                        <div class="form-group">
                            <label for="recipient-genre" class="col-form-label">Genre:</label>
                            <input type="text" class="form-control" id="recipient-genre" name="genre" />
                        </div>
                        <div class="form-group">
                            <label for="recipient-price" class="col-form-label">Price:</label>
                            <input type="text" class="form-control" id="recipient-price" name="price" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    @section scripts{
        <script>
            $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var title = button.data('title');
                var releaseDate = button.data('releaseDate');
                var genre = button.data('genre');
                var price = button.data('price');
                var modal = $(this);
                modal.find('.modal-body input[name="id"]').val(id);
                modal.find('.modal-body input[name="title"]').val(title);
                modal.find('.modal-body input[name="releaseDate"]').val(releaseDate);
                modal.find('.modal-body input[name="genre"]').val(genre);
                modal.find('.modal-body input[name="price"]').val(price);
            })
        </script>
    }

    Stefano

    Monday, May 18, 2020 4:25 PM

All replies

  • User-474980206 posted

    this would be a good time to use the debugger, and see what is happening.

    but the issue is according to the w3c space, upper case characters are not allowed in a data-* attribute.  so in the code: 

               var releaseDate = button.data('releaseDate');

    its looking for [data-release-date]

    try:

    data-release-date=\"{model.ReleaseDate}\"

    Monday, May 18, 2020 5:13 PM
  • User1268823346 posted

    thanks, with this correction in debug 

    var releaseDate = button.data('releaseDate');

    assume the correct value, but when open modal form show  the string "gg/mm/aaaa" instead value.

    where is now the problem ?

    thanks

    Tuesday, May 19, 2020 6:36 AM
  • User-17257777 posted

    Hi stnf74,

    You should use a string instead of  a datetime type. And <input type=date> requires the bound value to be of the format yyyy-MM-dd. You can format the datetime like below:

    data-releasedate=\"{model.ReleaseDate.ToString("yyyy-MM-dd")}\"

    Best Regards,

    Jiadong Meng

    Thursday, May 21, 2020 2:30 AM
  • User-1955300613 posted

    Hi stnf74

    Thank you for your question.

    To change the date format, you  can add

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy MM dd}")] 

    above your 'ReleaseDate' entity,

    you can change the 'yyyy MM dd' to 'yyyy:MM:dd' or 'yyyy/MM/dd'  as you like.

    For more details, you can refer to: https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation?view=aspnetcore-3.1#using-datatype-attributes

    I hope this can do something for you.

    Best Regards,

    Tsaisoul.

    Thursday, May 21, 2020 3:27 AM