Home / Questions / 37086
Accepted
ger
Asked: 2020-12-02 10:44:29 +0800 CST 2020-12-02 10:44:29 +0800 CST

DatePicker only show me year and cannot be edited

  • 772

I have the following code that I am working on in MVC 5 Bootstrap and Razor

       @Html.TextBox("Agno", String.Format("{0:d}", DateTime.Now.ToString("yyyy")), new { @class = "form-control", type = "date", @required = "required" })

But it only shows me the control DatePickerand what I want is just to select the year, Select! not Edit! Can this be done?

enter image description here

c#

3 Answers

  1. I had a similar problem and fixed it by modifying @readonly = false. In your case it would look like this:

    @Html.TextBox("Agno", String.Format("{0:d}", DateTime.Now.ToString("yyyy")), new { @class = "form-control", type = "date", @required = "required", @readonly = false })
    • 1

  2. I don't know how you have declared your datepickerbut if you define in javascript like this:

    $("#datepicker").datepicker( {
    format: "yyyy",
    startView: "year", 
    minViewMode: "year"
});

    From the beginning it will only select and show the year. Here is the documentation.

    • 1
  3. Best Answer

    I think it's best to do something like this:

    <div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            viewMode: 'years',
            format: 'YYYY'
        });
    });

    </script>
</div>

    you must have find reference all boostrap and jQuery

    I hope it helps you

    • 1