0

I need to only show month and year when a user selects the datepicker. I have followed examples and tried to find a problem but it just seems to not be working. Can some one please help? cshtml file 

<div class=" accordion" id="accordion">
    <i class="icon-plus-sign app-icon-orange icon-2x" style="cursor:pointer" id="btnAddTierGroup"></i> Add new date range
    @*Create a panel for each time period*@
    @for (var i = 0; i < Model.Periods.Count; i++)
    { @Html.EditorFor(x => x.Periods[i], "TimePeriodTiers")  }
</div>

JS (minViewMode: 1 is months for those unfamiliar with bootstrap)

$(document).ready(function () {
     $('[id^="Periods"]').datepicker({
            format: "mm/dd/yyyy",
            minViewMode: 1
        });
    })

EDIT: I found I had two problems. One fixed and one still exists. 1. the selector id^="Periods" was attaching to too many objects. Fixed by using 'id$=BeginDate' so it only grabs what I need it to. 2. there is a function in the JS that stop the user from selecting past the end date of other Tiers. the two scenarios are as follows: the function works but allows user to pick back dates

<script type="text/javascript">
var MaxTierCount = 25;
var MaxRate = @ViewBag.RateNotification

  SetUpTableSorter();

$('[id$=BeginDate]').ready(function () {
    $('[id$=BeginDate]').datepicker({
        format: "mm/dd/yyyy",
        startView: "months",
        minViewMode: 1
    });
})

    setupDateRanges($('#accordion'));

Scenario 2: user is unable to pick back dates but the function does not work:

<script type="text/javascript">
var MaxTierCount = 25;
var MaxRate = @ViewBag.RateNotification

SetUpTableSorter();
setupDateRanges($('#accordion'));


$('[id$=BeginDate]').ready(function () {
    $('[id$=BeginDate]').datepicker({
        format: "mm/dd/yyyy",
        startView: "months",
        minViewMode: 1
    });
})

Any help?

bepike
  • 19
  • 6
  • Possible duplication is here: http://stackoverflow.com/questions/14974394/bootstrap-datepicker-months-and-years-only – Pavlo Mar 06 '14 at 14:08
  • 1
    @Pavlo not quite. I need to know if I am assigning the JS correctly to the ID created in the for loop. I have the calendar working with a static ID just not with the loop and dynamic id. – bepike Mar 06 '14 at 14:12
  • Your code doesn't make sense, nesting datapicker() plugin initialization inside another datepicker() plugin initialization. What about open your console? What about reading plugin DOC? – A. Wolff Mar 06 '14 at 14:12
  • 1
    @A.Wolff Why not make a code suggestion instead of just saying you are wrong? – bepike Mar 06 '14 at 14:15
  • @bepiek because it is not by copying/pasting code that someone can learn. I was guessing you could easily spot your error here, so please try: `$(document).ready(function () { $('[id^="Periods"]').datepicker({ format: "mm/yyyy", minViewMode: 1 }); })` EDIT: finally looks like you were able to spot it by yourself ;) PS: i'm sorry but i couldn't help you more, bootstrap give me headhaches... – A. Wolff Mar 06 '14 at 14:20
  • @A.Wolff I apologize. I took your comment as a stab when it was actually constructive. I changed my code right before you commented that back. however it still is not working. :( It seems like the function is not assigning to each specific id but to the entire list that is created. I feel like this should still work though – bepike Mar 06 '14 at 14:23
  • @A.Wolff I appreciate the attempt. I am learning to dislike bootstrap more and more. (and JavaScript debugging in general haha) – bepike Mar 06 '14 at 14:24
  • Please see edits above – bepike Mar 06 '14 at 16:59

0 Answers0