CODEWITHSUNDEEP
javascriptjqueryvb.netasp.net-mvc-4razor
Shu
Shu

Reputation: 55

How to add DatePicker when I click on text box?

In my MVC4 razor engine, I need to pick date from text box. It is my View:

<tr>
  <td>Start Date</td>
  <td>@Html.TextBox("RateListStartDate")</td>
</tr>

<tr>
  <td>End Date</td>
  <td>@Html.TextBox("RateListEndDate")</td>
</tr>

When I click on text box of start date or end date, it should display calendar.

Upvotes: 3

Views: 56642

Answers (5)

Minal Raniga
Minal Raniga

Reputation: 101

<script>
    $(function()
    {
        $("#date").datepicker();
        $("#date").datepicker
        ({
            dateFormat: "dd-mm-yyyy"
        });
    });
</script>

<tr>
  <td>Start Date</td>
    <div class="form-group">
            @Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label   col-md-2" })
            <div class="col-md-10">
                            @Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
                            @Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
                    </div>
        </div>
</tr>

<tr>
  <td>End Date</td>
    <div class="form-group">
            @Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label   col-md-2" })
            <div class="col-md-10">
                            @Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
                            @Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
                    </div>
        </div>
</tr>

Upvotes: 0

Aritra B
Aritra B

Reputation: 1746

$(document).ready(function () {
        $('#txtBoxId').datepicker();
    });

refer this to your Layout

@Scripts.Render("~/bundles/jqueryui")

Upvotes: 2

Marco
Marco

Reputation: 23937

Since you use MVC, jQuery "should" already referenced in your layout page. You will also need the jqueryUI.

If the datepicker code is throwing erros at you, add the following 2 lines, to your view or your layouts page:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Then you need to declare the elements, which should be get the datepicker functionality.

$(document).ready(function(){
    $(".getdate").each(function() {
        $(this).datepicker();
    });
});

and edit your Html.TextBoxFor() accordingly:

@Html.TextBox("RateListStartDate", new {@class="getdate"})

This should do the trick. Kind regards

Upvotes: 5

Kousik
Kousik

Reputation: 22415

<!doctype html>
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
      $( "#datepicker" ).datepicker({ minDate: -100, maxDate: "+0D" });
      $("#datepicker").datepicker("setDate",new Date());
      $( "#datepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy");
    });
</script>
</head>
<body>
  <p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

Upvotes: 4

Saritha.S.R
Saritha.S.R

Reputation: 800

You can use jquery datepicker. DATEPICKER DEMO

$(document).ready(function(){
    $(".datepicker").each(function() {
        $(this).datepicker();
    });
});

jsfiddle

Upvotes: 4

Related Questions