I recently implemented a directive in my HTML for selecting dates, and I'm struggling to add time slots to it. Here is the code snippet:
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"
};
});
My goal is to be able to select time slots within this DatePicker, such as $scope.time='00h-12'. Unfortunately, I haven't been able to figure out how to implement this feature.