Jquery DatePicker to multiple elements.?

Question

How to apply Jquery DatePicker to multiple elements. at once??
Suppose i have 3 TextBoxes

 <td class="textBox">@Html.LabelFor(model => model.textbox1)
 <td class="textBox">@Html.LabelFor(model => model.textbox2)
 <td class="textBox">@Html.LabelFor(model => model.textbox3)

Now here i want to apply datepicker to all three textBoxex at once.

I also want to know is it possible to set mm-yy as datepicker format???

Updated
How to set regional datepicker dateFormat and dateRange at one step??

score 3 · Answer 1 · answered Feb 01 '12 at 11:43

3

$(".textBox").datepicker({ dateFormat: "mm-y" });

Source: http://jqueryui.com/demos/datepicker/#date-formats

answered Feb 01 '12 at 11:43

Stefan

5,644
4
24
31

score 1 · Answer 2 · answered Feb 01 '12 at 11:44

1

If you give each of your date inputs a class (e.g. cdate) you can use something like this:

$(function() {
   $(".cdate").datepicker({
      dateFormat: 'mm-y'
   });
});

http://jsfiddle.net/z84td/2/

answered Feb 01 '12 at 11:44

akiller

2,462
22
30

How are you adding your textboxes? See http://stackoverflow.com/a/5445526/171703 for how to add a class (note that they use zip and I used cdate, you'll need to use the same class names). – akiller Feb 01 '12 at 11:51
Thanks for the down vote yesterday someone. Not sure why it was downvoted? – akiller May 17 '13 at 11:33

RollerCosta · Accepted Answer · 2016-06-20T10:23:10.613

Changed @Html.LabelFor to

@Html.TextBoxFor(model=>model.textbox1,new{@class=textBox1}) @Html.TextBoxFor(model=>model.textbox1,new{@class=textBox1}) @Html.TextBoxFor(model=>model.textbox1,new{@class=textBox1})

Then used below script

<script type="text/javascript">

$(function () {
    alert(abc);
    $(".textBox").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm-yy',
        yearRange: '1900:2012'
    });
    $.datepicker.setDefaults($.datepicker.regional[""]);
    $(".textBox").datepicker($.datepicker.regional["en"]);
    $(".textBox").datepicker("option", $.datepicker.regional[anyculture]);
});

score 0 · Answer 4 · answered Feb 01 '12 at 11:40

0

You should just be able to attach the datepicker to the class:

$(".textBox").datepicker();

answered Feb 01 '12 at 11:40

Jamie Dixon

53,019
19
125
162

score 0 · Answer 5 · answered Feb 01 '12 at 11:47

you should use

@Html.TextBoxFor(model=>model.text1, new {@class="date-picker"});
<script>
$(".date-picker").datepicker();
</script>

OR

1- Add new Editor inside Views->Shared->EditorTemplates DateTime

@model System.DateTime?
@if (Model.HasValue)
{
    @Html.TextBox("", Model.Value.Date.ToShortDateString(), new { data_datepicker = "true", style="width:80px;" })      
}
else
{
    @Html.TextBox("", null, new { data_datepicker = "true", style="width:80px;" })      
}
<script type='text/javascript'>
    $(function () {
        $(":input[data-datepicker]").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            showOn: "both",
            showAnim: "slide",
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 2,
            buttonImage: "@Url.Content("~/xtras/images/calendar.png")",
            buttonImageOnly: true
        });
    };
</script>

2- Use EditorFor helper for view

@Html.EditorFor(model=>model.date1)

Jquery DatePicker to multiple elements.?

5 Answers5