How to make default time selection in kendo-time-picker - angularjs

I'm using kendo-time-picker in my angular js project. The dropdown default is blank. But, when i open the dropdown it should show 8:00 AM as a first time. How can i achieve that.
Below is my code snippet.
<input class="form-control kendotimepicker" name="StartTimeVal" kendo-time-picker
ng-model="startTimeValModel"
ng-change="startTimeChange(startTimeValModel)"
ng-required=true
ng-pattern="/^(0?[1-9]|1[012])(:[0-5]\d) [AP][M]$/"
interval="5"
title="hh:mm AM/PM">


You can use the scrollTop() function, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker({
open: function(e) {
if (!e.sender.value()) { // Run only if no value was selected
setTimeout(() => {
let containerElement = e.sender.timeView.list;
let listElement = containerElement.children().first();
containerElement.scrollTop(listElement.height() * 8 / 24)
}, 0);
}
}
});
</script>
</body>
</html>


You can use the k-value attribute and set the default value
DEMO
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.getType = function(x) {
return typeof x;
};
$scope.isDate = function(x) {
return x instanceof Date;
};
$scope.value = '08:00 AM';
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<h4>Select time:</h4>
<input kendo-time-picker="dtp"
k-value="'08:00 AM'"
ng-model="value"
style="width: 100%;" />
{{value}}
</div>
</div>

Related

Populate inputs by number angularjs

I am trying to populate input by typing the number in input[number].
Why this doesn't work
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
return sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20">
<ul>
<li ng-repeat="i in lengInput.fillSequence(lengInput.count)">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>
since this is working
JSFiddle Demo
Please find my mistake.

Instead of attaching the function directly to the ng-repeat, you can use ng-init to intialize the $scope.lengInput.values and add an ng-change to the input field where $scope.lengInput.count is getting set, so that the function does not get run every time, instead it runs only when the value in the input box has changed!
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
$scope.lengInput.values = sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="lengInput.fill(lengInput.count)">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20" ng-change=" lengInput.fill(lengInput.count)">
<ul>
<li ng-repeat="i in lengInput.values">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>

keyup is not working in bootstrap-select leave search using jQuery

This is my code, and I want to catch changing in search input field, but jQuery "keyup" is not working. And I'm using Angular to manipulate my data. I tried to add default text input to my page, and everything worked fine.enter code here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select live search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
//angular stuff
var app = angular.module('app', []);
app.service('service', function(){
this.getCities = function (){
return ["Аксаковщина д. Минская обл., Минский р-н, Горанский с/с",
"Андреевщина д. Витебская обл., Оршанский р-н, Андреевщинский с/с",
"Антоновка д. Гомельская обл., Калинковичский р-н, Горбовичский с/с",
"Антоново д. Брестская обл., Барановичский р-н, Колпеницкий с/с"];
};
});
app.controller('ctrl', function ($scope, service){
$scope.cities = service.getCities();
});
//jquery stuff
$(document).ready(function (){
$('input').on('keyup', function() {
alert('keyup is fired!!!');
});
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="destinationFrom">
<select id="selectDestinationFrom" class="selectpicker" data-live-search-style="startsWith" data-live-search="true">
<option ng-repeat="city in cities track by $index">{{city}}</option>
</select>
</div>
<input type="text"/>
</body>
</html>

Please use these css and js.You are using older version of css and js.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

Can't destroy angular-strap popover

I'm creating popovers with angular-strap using the $popover service like this:
this.popover = $popover(this.element, {
title: 'popover title',
content: 'popover content',
trigger: 'hover',
container: 'body',
html: true
});
This renders correctly:
However, when I try to destroy the popover, it doesn't remove it completely because when I hover over the element, it shows this:
I've tried separately both of the following lines of code which produce the same empty popover result:
this.popover.destroy();
this.popover.$scope.$destroy();
What am I doing wrong?

I tried and its working fine for me, you can refer the plnkr here: http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview
// HTML code
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.7"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
<br />
<small>(using $popover service)</small>
</button>
<div><a ng-click="hidePopover()">Click to close</a></div>
</div>
</div> </body>
</html>
// JS code
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
html: true
});
})
.controller('PopoverDemoCtrl', function($scope, $popover) {
$scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
var asAServiceOptions = {
title: $scope.popover.title,
content: $scope.popover.content,
trigger: 'manual'
}
var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
console.log(myPopover);
$scope.togglePopover = function() {
myPopover.$scope.$show();
};
$scope.hidePopover = function() {
myPopover.destroy();
};
});
Or may be if you are still facing some issue, you can create a plnkr and share.

kendo slider - reset value on click event

Is there a way i can reset the value of kendo slider once it is changed.
Please see this example code: http://dojo.telerik.com/AKOhe/6
entire code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<input k-ng-model="width" kendo-slider />
</div>
<button k-ng-click="onClick()" />
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
How can i reset value of kendo slider on reset button?
Thanks in advance.

It is not working because you place the button outside of the controller scope, your code already correct. Try it like
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="margin-bottom:20px;">
<input k-ng-model="width" kendo-slider="slider" />
<button ng-click="onClick()"> reset</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>

AngularJS UI Bootstrap carousel component not updating with the model change

Any one can take a look at my code? It use the ui-bootstrap carousel component. When I tried to click on one of two buttons, it updates the slides to be show, so only part of slides will be shown in the carousel... THe problem is I cannot see the carousel AT ALL sometimes (not always)... try it out... Any one can tell me why? And how to solve this issue?
My code is at: http://plnkr.co/edit/Qp8axH
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="CarouselLeftCtrl" class="col-xs-6 col-md-6 shopper-left">
<div style="position:relative;clear:both">
<ul class="shopper-categories" style="list-style-type: none; float:left; padding-left:0">
<li><a data-category='cute' ng-click='emitCategoryInfo($event)' class="depstore btn btn-border" style="margin-bottom:5px; padding-left:0">Cute</a>
</li>
<li><a data-category='supercute' ng-click='emitCategoryInfo($event)' class="boutique btn btn-border" style="margin-bottom:5px; padding-left:0">Super Cute</a>
</li>
</ul>
</div>
<div style="clear:both">
======
</div>
<div class="col-md-1">clicks {{slides | json}}</div>
<div>
======
</div>
<div class="col-md-6 left-carousel">
<div>
<div style="height: 150px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
js:
/
/ Add your javascript here
var CarouselLeftCtrl, CarouselRightCtrl, app;
app = angular.module("app", ["ui.bootstrap"]);
CarouselLeftCtrl = function($scope, $http, $log, $timeout) {
$scope.myInterval = -1;
$scope.slides = [];
$scope.json = 0;
$http.get("shopper_images.json").then(function(result) {
var d = result.data;
for (var i = 0; i < d.length; i++) {
$scope.slides.push({
image: d[i].image,
category: d[i].category
});
}
$scope.allSlides = $scope.slides;
});
$scope.$on("category", function(event, data) {
$scope.clicks +=1;
var slides = $scope.allSlides;
var result = [];
for (var i = 0; i < slides.length; i++) {
if(slides[i].category === data.category) {
result.push(slides[i]);
}
}
$scope.slides = result;
$scope.slides[0].active = true;
$scope.$apply();
});
$scope.emitCategoryInfo = function($event) {
$scope.$emit("category", {
category: angular.element($event.target)[0].dataset.category
});
};
};
json:
[
{
"image": "http://placekitten.com/601/300", "category": "cute"
},
{
"image": "http://placekitten.com/602/300", "category": "supercute"
},
{
"image": "http://placekitten.com/603/300", "category": "cute"
}
]

Resources