I am using the bootstrap4 gijgo datepicker and the below code works fine:

<div id="myDatePicker" class="form-group" style="display: none;">
     <label asp-for="Test.Date" class="control-label">Date</label>
     <input  id="datepicker" width="276"/>
     <span asp-validation-for="Test.Date" class="text-danger"></span>
</div>    

The problem comes in when I add 'asp-for'. For a start googles date picker appears and technically works, but the gijgo datepicker breaks:

<div id="myDatePicker" class="form-group" style="display: none;">
     <label asp-for="Test.Date" class="control-label">Date</label>
     <input asp-for="Test.Date" id="datepicker" width="276"/>
     <span asp-validation-for="Test.Date" class="text-danger"></span>
</div>

    $('#datepicker').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'dd/mm/yyyy',
        minDate: Date.now(),
        maxDate: function() {
            var date = new Date();
            date.setDate(date.getDate()+5);
            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
        }
    });

I have tried setting the 'format' to various values and messing with data annotations.

    [DataType(DataType.Date)]
    public DateTime ExpiryDate { get; set; }

Also:

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime ExpiryDate { get; set; }

When I try to select a date using the gijgo datepicker it just doesn't do anything.

How do I format the Date so that the datepicker understands it, and how do I stop chrome being 'helpful'?

Related posts

Recent Viewed