月份和年份的日期选择器不起作用 [英] datepicker for month and year not working
本文介绍了月份和年份的日期选择器不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经为我的html页面尝试了datepicker.它不起作用.我只是在标签日期旁边得到一个文本框.有什么帮助吗? 这是我的html代码段
I have tried out the datepicker for my html page. Its not working. I am just getting a textbox next to a label Date. Any help on this? Here is my html snippet
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date:</label>
<div class="col-sm-4">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
</div>
</div>
js代码:
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
css代码:
.ui-datepicker-calendar {
display: none;
}
下面是从我的index.html导入的内容:
Below are the imports from my index.html:
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="../lib/datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="../css/index.css" rel="stylesheet" />
<script src="../app.js"></script>
<script src="../Controller/HeaderCtrl.js"></script>
推荐答案
好吧,如果您正在使用并包括jqueryUI和jquery,那么您的代码就可以了.
Well if you are using and including jqueryUI and jquery the right way your code is fine.
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date:</label>
<div class="col-sm-4">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
</div>
</div>
这篇关于月份和年份的日期选择器不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文