CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
Bad Dub
Bad Dub

Reputation: 1593

Bootstrap Datepicker Year Only Not Binding

In my MVC project I have a nullable Datetime property in my model named ReplacementDate.

In my view I have a Bootstrap date picker (version 2.0) that is initialised using the following code:

$('.input-group.decade').datepicker({
            format: "yyyy",
            viewMode: "years",
            minViewMode: "years",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            showOnFocus: false
});

The datepicker renders correctly on screen and I can only select a year value from the calendar. But when I post the form data the ReplacementDate property does not have a value. I have tried setting the format to " yyyy" and "yyyy" and even "YYYY" but nothing seems to allow the binding to happen.

The weird this is I have another datepicker on the same page that allows the user to select a month and year and it binds correctly on submission to a different nullable date property. The code for this is as follows:

$('.input-group.month').datepicker({
            format: "mm/yyyy",
            viewMode: "months",
            minViewMode: "months",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            showOnFocus: false
});

What am I doing wrong to stop the ReplacementDate value from binding correctly? Do I have to make the ReplacementDate a nullable int or something?

Upvotes: 0

Views: 2842

Answers (2)

Bad Dub
Bad Dub

Reputation: 1593

I changed the ReplacementDate DateTime property to an int and it binded. I don't know why it wouldn't bind when it was a DateTime saying as the MM/yyyy version binded fine as a DateTime.

Upvotes: 1

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

I would suggest doing it this way : 

$('#date1').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'yy',
  onClose: function(dateText, inst) {
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year));
    console.log($("#ui-datepicker-div .ui-datepicker-year :selected").val())
  }
});
#ui-datepicker-div {
  font-size: 12px;
}

.ui-datepicker-calendar {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.min.css" />
<input type="text" id="date1" name="date1" />

Upvotes: 2

Related Questions