Disable all days in jQuery DatePicker except 1st day of each month in ASP.Net

Hi man,

Please Share your HTML Code

 below code is used for select date.and i want only 1st day of month enabled for every month

<div class="col-md-12 col-lg-12">
    <div class="panel panel-danger">
        <div class="panel-heading">
            Add Employee Payroll</div>
        <div class="panel-body">
            <div class="box-body">
                <div class="form-group col-sm-6">
                    <label for="exampleInputEmail">
                        Employee Code:</label>
                    <input name="ctl00$ContentPlaceHolder1$txtEname" type="text" id="ContentPlaceHolder1_txtEname"
                        class="form-control" />
                </div>
                <div class="form-group form-group col-sm-6">
                    <label for="Email">
                        Day:</label>
                    <input name="ctl00$ContentPlaceHolder1$txtpayrolldate" type="text" id="ContentPlaceHolder1_txtpayrolldate"
                        class="form-control" />
                </div>
                <div class="form-group form-group col-sm-3">
                    <label for="exampleInputEmail1">
                        Enter Salary</label>
                    <input name="ctl00$ContentPlaceHolder1$txtSalAmount" type="text" id="ContentPlaceHolder1_txtSalAmount"
                        class="form-control" placeholder="Amount" />
                </div>
                <div class="form-group col-md-12">
                    <input type="submit" name="ctl00$ContentPlaceHolder1$btnsubmit" value="Submit" id="ContentPlaceHolder1_btnsubmit"
                        class="btn btn-primary" />
                </div>
            </div>
        </div>
    </div>
</div>

 <script type="text/javascript">
    $(window).load(function () {
        calender();
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                calender();
            }
        });
    };
    function calender() {
        var currentDate = new Date();
        var currentDate2 = new Date();
        $('[id$=txtdate]').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd/mm/yy'
        });

        $('[id$=TextBox1]').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd/mm/yy'
        });
        $('[id$=TextBox1]').datepicker("setDate", currentDate);
        $('[id$=txtdate]').datepicker("setDate", currentDate);
    }
</script>

 <div id="appoint" class="form-group col-md-2">
    <input name="ctl00$ContentPlaceHolder1$txtdate" type="text" id="ContentPlaceHolder1_txtdate"
        class="form-control" />
</div>
<div id="Div1" class="form-group col-md-2">
    <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="ContentPlaceHolder1_TextBox1"
        class="form-control" />
</div>

the html code which shown above is used for select date range.and example is showing in image what happening if i select a date range.after post back my selected date is lost.

Hi man,

please share code for Button "Show" you used in screenshot you shared and as well  excepted output result

 protected void btnSubmit_Click1(object sender, EventArgs e)
    {
        aftdate = DateTime.ParseExact(txtdate.Text, "dd/MM/yyyy", System.Globalization.CultureInfo.InvariantCulture);

        attdate = DateTime.ParseExact(TextBox1.Text, "dd/MM/yyyy", System.Globalization.CultureInfo.InvariantCulture);

        if (userid != "Admin")
        {
            bindgridbydateony(aftdate, attdate, userid);
        }
        else
        {
            bindgridbydateonyforadmin(aftdate, attdate);
        }


    }

Hi man,

Your excepted result and screenshot is not matching can you explain what exactly you are trying to do and what you are excepting