@{
ViewBag.Title = "datepicker";
}
<h2>datepicker</h2>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Content/js/jquery.min.js"></script>
<script src="~/Content/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
<script>
$(document).ready(function () {
$('#datePickerAll').datepicker({
format: 'dd-mm-yyyy',
autoclose: true
});
$("#datepickerYear").datepicker({
format: " yyyy", // Notice the Extra space at the beginning
viewMode: "years",
minViewMode: "years",
autoclose:true
});
$("#datePickerMM").datepicker({
format: " mm", // Notice the Extra space at the beginning
viewMode: "months",
minViewMode: "months",
autoclose: true
});
$("#datepickermmyyyy").datepicker({
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months",
autoclose: true
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-6">
<strong>dd/mm/yyyy</strong>
<div class="input-group input-append date" id="datePickerAll">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="col-md-6">
<strong>yyyy</strong>
<div class="input-group input-append date" id="datepickerYear">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<strong>MM</strong>
<div class="input-group input-append date" id="datePickerMM">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="col-md-6">
<strong>mmyyyy</strong>
<div class="input-group input-append date" id="datepickermmyyyy">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</body>
</html>
