gpt4 book ai didi

javascript - AngularJS 自定义日期选择器指令

转载 作者:行者123 更新时间:2023-12-03 10:26:11 26 4
gpt4 key购买 nike

我想使用自定义模板制作自定义日期选择器指令。

但我不知道如何开始构建它......

如何包含我的指令的日期数据?

我很感谢你的指导,或者给我一些建议,以便我更准确地解决这个问题。

最佳答案

也许对你有帮助!请按照以下步骤操作

HTML 代码示例:

    <label>Birth Date</label>
<input type="text" ng-model="birthDate" date-options="dateOptions" custom-datepicker/>

<hr/>

<pre>birthDate = {{birthDate}}</pre>

<script type="text/ng-template" id="custom-datepicker.html">
<div class="enhanced-datepicker">
<div class="proxied-field-wrap">
<input type="text" ui-date-format="yy-mm-dd" ng-model="ngModel" ui-date="dateOptions"/>
</div>
<label>
<button class="btn" type="button"><i class="icon-calendar"></i></button>
<span class="datepicker-date">{{ngModel | date:'d MMM yyyy'}}</span>
</label>
</div>
</script>

JS 代码示例:

    angular
.module('App',['ui.date'])
.directive('customDatepicker',function($compile){
return {
replace:true,
templateUrl:'custom-datepicker.html',
scope: {
ngModel: '=',
dateOptions: '='
},
link: function($scope, $element, $attrs, $controller){
var $button = $element.find('button');
var $input = $element.find('input');
$button.on('click',function(){
if($input.is(':focus')){
$input.trigger('blur');
} else {
$input.trigger('focus');
}
});
}
};
})
.controller('myController',function($scope){
$scope.birthDate = '2013-07-23';
$scope.dateOptions = {
minDate: -20,
maxDate: "+1M +10D"
};
});

/*global angular */
/*
jQuery UI Datepicker plugin wrapper

@note If ≤ IE8 make sure you have a polyfill for Date.toISOString()
@param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto uiDateConfig
*/

angular.module('ui.date', [])

.constant('uiDateConfig', {})

.directive('uiDate', ['uiDateConfig', '$timeout', function (uiDateConfig, $timeout) {
'use strict';
var options;
options = {};
angular.extend(options, uiDateConfig);
return {
require:'?ngModel',
link:function (scope, element, attrs, controller) {
var getOptions = function () {
return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
};
var initDateWidget = function () {
var showing = false;
var opts = getOptions();

// If we have a controller (i.e. ngModelController) then wire it up
if (controller) {

// Set the view value in a $apply block when users selects
// (calling directive user's function too if provided)
var _onSelect = opts.onSelect || angular.noop;
opts.onSelect = function (value, picker) {
scope.$apply(function() {
showing = true;
controller.$setViewValue(element.datepicker("getDate"));
_onSelect(value, picker);
element.blur();
});
};
opts.beforeShow = function() {
showing = true;
};
opts.onClose = function(value, picker) {
showing = false;
};
element.on('blur', function() {
if ( !showing ) {
scope.$apply(function() {
element.datepicker("setDate", element.datepicker("getDate"));
controller.$setViewValue(element.datepicker("getDate"));
});
}
});

// Update the date picker when the model changes
controller.$render = function () {
var date = controller.$viewValue;
if ( angular.isDefined(date) && date !== null && !angular.isDate(date) ) {
throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
}
element.datepicker("setDate", date);
};
}
// If we don't destroy the old one it doesn't update properly when the config changes
element.datepicker('destroy');
// Create the new datepicker widget
element.datepicker(opts);
if ( controller ) {
// Force a render to override whatever is in the input text box
controller.$render();
}
};
// Watch for changes to the directives options
scope.$watch(getOptions, initDateWidget, true);
}
};
}
])

.constant('uiDateFormatConfig', '')

.directive('uiDateFormat', ['uiDateFormatConfig', function(uiDateFormatConfig) {
var directive = {
require:'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var dateFormat = attrs.uiDateFormat || uiDateFormatConfig;
if ( dateFormat ) {
// Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return jQuery.datepicker.parseDate(dateFormat, value);
}
return null;
});
modelCtrl.$parsers.push(function(value){
if (value) {
return jQuery.datepicker.formatDate(dateFormat, value);
}
return null;
});
} else {
// Default to ISO formatting
modelCtrl.$formatters.push(function(value) {
if (angular.isString(value) ) {
return new Date(value);
}
return null;
});
modelCtrl.$parsers.push(function(value){
if (value) {
return value.toISOString();
}
return null;
});
}
}
};
return directive;
}]);

这是一个工作 fiddle http://jsfiddle.net/FVfSL/ .

关于javascript - AngularJS 自定义日期选择器指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29389873/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com