Datepicker property not applying

Question

First set of block uses class and second set of block uses id but when use of class its working fine but if i replace id its not implementing

$(".input-monthpicker").datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: new Date(new Date().getFullYear(), '0', '01'),
        autoclose: true
    });

    $("#ForMonth").datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: new Date(new Date().getFullYear(), '0', '01'),
        autoclose: true
    });

razor syntax

@Html.TextBoxFor(m => m.ForMonth, new { @class = "form-control input-monthpicker validate freezelastyear", placeholder = "Month", @readonly = true, id = "ForMonth" })

please help me out

Answer 1

Here is a working demo:

@Html.TextBoxFor(m => m.ForMonth, new { @class = "form-control input-monthpicker validate freezelastyear", placeholder = "Month", id = "ForMonth" })

@section scripts{
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
  
    <script>
         $("#ForMonth").datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: new Date(new Date().getFullYear(), '0', '01'),
        autoclose: true
    });
    </script>
}

result:

If it still doesn't work,try to use:

 $("input[id$=ForMonth]").datepicker({
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months",
            startDate: new Date(new Date().getFullYear(), '0', '01'),
            autoclose: true
        });