AngularJS+；Jquery日期选择器现在在视图页面中显示值
我在我的项目中使用了角度数据选择器jQuery和momentJS。当我在静态环境中测试它时，它可以工作，但当我将它添加到项目中时，数据不会绑定。它会弹出，但我只看到代码，没有看到值。我遵循Github的指示。[ 这就是我的弹出窗口的样子 这是我的指示：AngularJS+；Jquery日期选择器现在在视图页面中显示值,jquery,angularjs,datepicker,momentjs,Jquery,Angularjs,Datepicker,Momentjs,我在我的项目中使用了角度数据选择器jQuery和momentJS。当我在静态环境中测试它时，它可以工作，但当我将它添加到项目中时，数据不会绑定。它会弹出，但我只看到代码，没有看到值。我遵循Github的指示。[ 这就是我的弹出窗口的样子 这是我的指示： (function() { var app = angular.module('datePicker', []); var sdp_id = 0; var isofmt = 'YYYY-MM-DD'; app.directive('sim
(function() {
var app = angular.module('datePicker', []);
var sdp_id = 0;
var isofmt = 'YYYY-MM-DD';
app.directive('simpleDatePick', ['$compile', '$document', function($compile, $document) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
chosendate: '=sdpDate',
ondateselected: '&sdpOnDateSelected',
sdpMin: '=',
sdpMax: '='
},
compile: function(element, attributes) {
var uid;
var html = ' <div class="datepick" id="spd" ng-click="$event.stopPropagation()" ng-cloak>' +
'<div class="datepick_header">' +
'<a href ng-click="setMonth($event, -1)"><span class="datepick_arrowleft"></span></a>' +
'<span class="titleMonth" >{{ actualDate.format("MMMM") | uppercase }}</span>' +
'<a href ng-click="setMonth($event, 1)"><span class="datepick_arrowright"></span></a>' +
'<span> </span>' +
'<a href ng-click="setYear($event, -1)"><span class="datepick_arrowleft"></span></a>' +
'<span class="titleYear">{{ actualDate.format("YYYY") }}</span>' +
'<a href ng-click="setYear($event, 1)"><span class="datepick_arrowright"></span></a>' +
'</div>' +
'<div class="datepick_body">' +
'<table class="datepick_datecontainer" cellspacing="0" cellpadding="6">' +
'<thead>' +
'<tr>' +
'<td ng-repeat="dname in monthObj.weekdays">{{ dname }}</td>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="wk in monthObj.dates">' +
'<td ng-repeat="cell in wk" ng-click="setDate($event, cell)" ' +
'ng-class="{ datepick_outdatecell: cell.outofmonth, datepick_disabled: cell.disabled, ' +
'datepick_today: cell.today, datepick_initial: cell.initial }">{{ cell.day }}</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>' +
'<div class="datepick_footer" ng-show="showFooter">' +
'<div><a href ng-click="setDate($event, today)">Today</a></div>' +
'<div><a href ng-click="clearDate();" ng-show="model">Clear</a></div>' +
'</div>' +
'</div>';
return function($scope, element, attr, ngModel) {
ngModel.$parsers.push(function(value) {
var format = attr.sdpFormat || 'YYYY-MM-DD';
if (moment(value).isValid() == true) {
return moment(value).format(format);
} else {
return value;
}
});
sdp_id++;
uid = "sdp_id" + sdp_id;
html = html.replace('spd', uid);
uid = '#' + uid;
var format = attr.sdpFormat || 'YYYY-MM-DD';
$scope.showFooter = attr.footer == undefined ? true : (attr.footer != '');
$scope.today = { disabled: false, date: moment() };
$scope.actualDate = moment($scope.model || $scope.chosendate, format);
if ($scope.actualDate.isValid() == false) { $scope.actualDate = moment(); }
// Compile the html, link it to our scope and append the result to the page's body
var linkFn = $compile(html);
var content = linkFn($scope);
var body = $document.find('body').eq(0);
body.append(content);
// Answers the original div or input click event
element.on('click', function(evt) {
// Calculate the dropdown box's position
var elePos = $(element).offset();
var top = elePos.top + $(element).outerHeight() + 2;
var left = elePos.left;
$scope.initialDate = moment($scope.model || $scope.chosendate, format);
if (top < 0) { top = 0; }
if (left < 0) { left = 0; }
// Apply the changes in the current month and render the calendar
$scope.$apply(function() {
$scope.monthObj = renderMonth($scope.actualDate, $scope.sdpMin, $scope.sdpMax, $scope.initialDate, format);
$('.datepick:not(' + uid + ')').hide();
$(uid).fadeIn(400).css({ 'top': top, 'left': left });
evt.preventDefault();
})
return false;
});
// Dismisses the date picker box when the user clicks somewhere else
$document.on('click', function($event) { goAway(400); });
$scope.clearDate = function() {
$scope.model = '';
goAway(400);
}
// Answers a year navigation click
$scope.setYear = function(e, val) {
e.stopPropagation();
$scope.actualDate.add(val, 'y');
$scope.monthObj = renderMonth($scope.actualDate, $scope.sdpMin, $scope.sdpMax, $scope.initialDate, format);
}
// Answers a month navigation click
$scope.setMonth = function(e, val) {
e.stopPropagation();
$scope.actualDate.add(val, 'M');
$scope.monthObj = renderMonth($scope.actualDate, $scope.sdpMin, $scope.sdpMax, $scope.initialDate, format);
}
// Answers a date cell click
$scope.setDate = function(e, cell) {
e.stopPropagation();
if (!cell.disabled) {
$scope.$evalAsync(function() {
if ($(element).attr('sdp-date')) {
$scope.chosendate = cell.date.format(format);
} else {
$scope.model = cell.date.format(format);
}
if ($scope.ondateselected) {
$scope.ondateselected({ seldate: cell.date.format(format) });
}
});
goAway(400);
}
}
}
// Dismisses the date picker box
function goAway(speed) {
$('.datepick').fadeOut(speed);
}
// Renders a month of a year passed in dt.
// min and max determines which cells can be selected
// inidate is the date at the box when it was clicked
// Format is the format in which to show dates
function renderMonth(dt, min, max, inidate, format) {
var ini = moment(dt), m = ini.month(), y = ini.year();
var fim = ini.date(0);
var counter = ini.add(-ini.weekday(), 'd');
var dateObj = {};
var lines = [];
var wdn = [];
var tmp = counter.clone();
var idate = '';
if (inidate != undefined) { idate = inidate.format(isofmt); }
for (var i = 0; i < 7; i++) {
wdn.push(tmp.format('ddd').toUpperCase());
tmp.add(1, 'd');
}
if (min || max) {
var mindate = moment(min + ' 10:00:00', format + ' HH:mm:SS');
if (!mindate.isValid()) { mindate = moment(new Date(1970, 1, 1, 10)); }
var maxdate = moment(max + ' 10:00:00', format + ' HH:mm:SS');
if (!maxdate.isValid()) { maxdate = moment(new Date(2160, 12, 31, 10)); }
}
for (var l = 0; l < 6; l++) {
var line = [];
for (var c = 0; c < 7; c++) {
var dis = false;
if (min || max) {
var adate = counter.format(isofmt);
dis = !(adate >= mindate.format(isofmt) && adate <= maxdate.format(isofmt));
console.log(adate + ' ==> ' + mindate.format(isofmt));
}
var ctrfmt = counter.format(isofmt);
var obj = { date: counter.clone(),
day: counter.date(),
outofmonth: (counter.month() != m),
disabled: dis,
today: (moment().format(isofmt) == ctrfmt),
initial: (idate == ctrfmt)
};
line.push(obj);
counter.add(1, 'd');
}
lines.push(line);
}
dateObj.dates = lines;
dateObj.weekdays = wdn;
dateObj.month = m;
dateObj.year = y;
return dateObj;
}
}
}
} ]);}());
（函数（）{
var app=angular.module（'datePicker'，[]）；
var sdp_id=0；
var isofmt='YYYY-MM-DD'；
app.directive（'simpleDatePick'，['$compile'，'$document'，函数（$compile，$document）{
返回{
限制：“A”，
要求：'ngModel'，
范围：{
型号：'=ngModel'，
chosendate:'=sdpDate'，
ondateselected:“&sdpOnDateSelected”，
sdpMin:“=”，
sdpMax:“=”
},
编译：函数（元素、属性）{
变量uid；
var html=''+
'' +
'' +
“{actualDate.format（“MMMM”）|大写}”+
'' +
' ' +
'' +
“{actualDate.format（“YYYY”）}”+
'' +
'' +
'' +
'' +
'' +
'' +
“{{dname}}”+
'' +
'' +
'' +
'' +
“{{cell.day}”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
返回函数（$scope、element、attr、ngModel）{
ngModel.$parsers.push（函数（值）{
var format=attr.sdpFormat | |'YYYY-MM-DD'；
if（力矩（值）.isValid（）==true）{
返回力矩（值）。格式（格式）；
}否则{
返回值；
}
});
sdp_id++；
uid=“sdp\U id”+sdp\U id；
html=html.replace（'spd'，uid）；
uid='#'+uid；
var format=attr.sdpFormat | |'YYYY-MM-DD'；
$scope.showFooter=attr.footer==未定义？true:（attr.footer！=''；
$scope.today={disabled:false，date:moment（）}；
$scope.actualDate=力矩（$scope.model | |$scope.chosendate，格式）；
如果（$scope.actualDate.isValid（）==false）{$scope.actualDate=moment（）；}
//编译html，将其链接到我们的作用域，并将结果附加到页面主体
var linkFn=$compile（html）；
var内容=链接fn（$scope）；
var body=$document.find（'body'）.eq（0）；
正文.附加（内容）；
//回答原始div或输入单击事件
元素上（'click'，函数（evt）{
//计算下拉框的位置
var elePos=$（元素）.offset（）；
var top=elePos.top+$（元素）.outerHeight（）+2；
var left=elePos left；
$scope.initialDate=时刻（$scope.model | |$scope.chosendate，格式）；
如果（top<0）{top=0；}
如果（左<0）{left=0；}
//应用当月的更改并呈现日历
$scope.$apply（函数（）{
$scope.monthObj=renderMonth（$scope.actualDate、$scope.sdpMin、$scope.sdpMax、$scope.initialDate、format）；
$（'.datepick:not（'+uid+'））.hide（）；
$（uid）.fadeIn（400）.css（{'top'：top，'left'：left}）；
evt.preventDefault（）；
})
返回false；
});
//当用户单击其他位置时，取消日期选择器框
$document.on（'click'，函数（$event）{goAway（400）；}）；
$scope.clearDate=函数（）{
$scope.model=''；
goAway（400）；
}
//回答一年导航点击
$scope.setYear=函数（e，val）{
e、 停止传播（）；
$scope.actualDate.add（val，'y'）；
$scope.monthObj=renderMonth（$scope.actualDate、$scope.sdpMin、$scope.sdpMax、$scope.initialDate、format）；
}
//回答一个月导航点击
$scope.setMonth=函数（e，val）{
e、 停止传播（）；
$scope.actualDate.add（val，'M'）；
$scope.monthObj=renderMonth（$scope.actualDate、$scope.sdpMin、$scope.sdpMax、$scope.initialDate、format）；
}
//回答日期单元格单击
$scope.setDate=函数（e，单元格）{
e、 停止传播（）；
如果（！cell.disabled）{
$scope.$evalAsync（函数（）{
if（$（元素）.attr（'sdp-date'））{
$scope.chosendate=cell.date.format（格式）；
}否则{
$scope.model=cell.date.format（格式）；
}
如果（$scope.ondateselected）{
$scope.ondateselected（{seldate:cell.date.format（format）}）；
<div class="row">
<div class="col-lg-12 CellStyleForTheForm">
<form name="userForm" class="form-inline">
<div class="form-group">
<label >Date Range: </label>
<input type="text" ng-model="queryparams.min_date"
size="12" simple-date-pick />
<input type="text" ng-model="queryparams.max_date"
size="12" simple-date-pick />
</div>
<button type="submit"
class="btn btn-default"
ng-click="queryParams.submitCount = queryParams.submitCount + 1"
ng-init="queryParams.submitCount=0">
Apply
</button>
</form>
</div>
</div>