Text box should be empty and when i click on calendar icon then data picker load from my custom data, For example i will set 1 December 2020
I used the following code to open kendo datepicker widget on a specific date:
var targetDate = new Date(2020,11,1);
$('#myDatePicker').kendoDatePicker({
open: function () {
var calendar = this.dateView.calendar;
// Position the calendar on specific date
calendar.value(targetDate);
// Clear the value so that the change event triggers again
calendar.value(null);
},
change: function () {
// this will not be triggered if you forget to reset the widget value
},
value: null
});
Explanation:
I start with empty value for the datepicker, because it makes no
sense to position the datepicker if it already has a value (by
default the widget goes to its value data).
On open event specify the desired date using the value(targetDate) method. This positions the calendar on the target date/month/year.
Clear the widget value
with value(null), because otherwise the widget will not trigger
change event if user selects this date (I had troubles with change
not triggering because of this).
I think this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
var selectedValue = "";
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind("change", function (e) {
selectedValue = this.value();
});
datepicker.bind("open", function (e) {
this.value(new Date("1 December 2020"));
});
datepicker.bind("close", function (e) {
this.value(selectedValue);
});
</script>
</body>
</html>
You need to do the following things for that.
On DatePicker Open set the value of the date picker to the value you requires
On DatePicker Change, save the selected value to a variable.
On DatePicker Close, set the DatePicker Value to the saved variable.
I think this will work for you.
This should work:
$("#datepicker").kendoDatePicker({
max: moment(new Date()).subtract(6, 'years').toDate(),
min: moment(new Date()).subtract(100, 'years').toDate()
});
In this example, I am showing the minimum date is 100 years from the current date and maximum date is 6 years from the current date. So you just need to set the required year in the subtract method that needs to be showed in the datepicker.
Related
In my template file using thymeleaf I have below code
<script type="text/javascript" >
var ue=UE.geteditor();
ue.ready(function()
{
ue.setcontent("${user.email}");
});
</script>
I want to set the content of ue to attribute user's email ,but got "${user.email}" as a string instead.
What's the correct way to use thymeleaf attribute value in plain JS function?Any help?Thx.
You need to use script inlining.
<script th:inline="javascript">
let user = {
email: [[${user.email}]]
};
let ue = UE.geteditor();
ue.ready(function() {
ue.setcontent(user.email);
});
</script>
Here:
https://www.w3schools.com/code/tryit.asp?filename=GMNZXF3GUAGT
As you can see, it converts time AFTER you have to click on the button, I want it to show the output without needing to click on "try it" and the unconverted time to be hidden, so I just want the converted time to show when the user enters my website (not as alert, but in the content normally)
Cheers
In the example, you just need to remove the code in the tags from the function.
Eg:
<script>
var theDate = new Date(Date.parse('06/14/2020 4:41:48 PM UTC'));
document.getElementById("demo").innerHTML = "Local date Time: "+theDate.toLocaleString();
</script>
Then you code will run whenever the page loads and not onclick. To remove the unconverted time and button you just need to remove them from the HTML.
Thanks,
EDIT - CODE:
<!DOCTYPE html>
<html>
<head>
<title>
How to convert UTC date time
into local date time?
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeekforGeeks</h1>
<p id="demo"></p>
<script>
var theDate = new Date(Date.parse(
'06/14/2020 4:41:48 PM UTC'));
document.getElementById("demo")
.innerHTML = "Local date Time: "
+ theDate.toLocaleString();
</script>
</body>
</html>
please help me with this.
I am using ck editor 4.
The data is required in a particular font style, font size, and font color.
The user will get the data from an external source and the user has to paste the data in the CKeditor.
so whenever the user will paste the data, he will have to apply style, size, and color. I want to automate this so that whenever some data is pasted in the CKeditor these styles are auto-applied.
is there any way to automate this? If yes, how?
I looked into the API docs and searched on google but couldn't find the answers.
Look at CKEditor's Clipboard Integration.
You can customize the pasting of data on the paste event.
Here's a simple example of pasting text with bold and italic properties:
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor: Customized Pasting</title>
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor" rows="10" cols="80">
</textarea>
<script>
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
</script>
</body>
</html>
Demo:
You can work on it further according to your own use case and customize it according to some existing styles or maybe write a custom plugin only to custom-paste your particular data to avoid overriding the default pasting behavior.
you can customize the content when on paste event is occurred, use this code
CKEDITOR.replace('my_editor', {
}).on('paste', function (event) {
event.data.dataValue = '<b><i>' + event.data.dataValue + '</i></b>';
});
Struggling on writing the testcases on click,toggle,slideUp,fade events.
How do I write jasmine test cases to check if div is clicked or not and the slideUp and down and toggle events. Is there a provision in jasmine to test them.
Have listed my code having click test case for reference.
SpecRunner.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib_jasmine/jasmine- 2.3.4/jasmine_favicon.png">
<link rel="stylesheet" href="lib_jasmine/jasmine-2.3.4/jasmine.css">
<script src="scripts/jquery.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine-html.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/boot.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine-jquery.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="js/eigMain.js"></script>
<script type="text/javascript" src="js/sinon.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="js/specEig.js"></script>
</head>
<body>
</body>
</html>
js file for reference
$('#screenPane').click(function(e){
$('#Panel,.FixedHeader').toggleClass('fullscreen');
$('#eIcon').toggle();
$('#cIcon').toggle();
$(".Col").toggle();
$('html, body').animate({scrollTop: $('#total-results').offset().top}, 800);
$('#nav_up').fadeIn('slow');
$('#nav_down').hide();
});
Spec.js file having click event test case on it. It gives me ERROR : Expected event [object Object] to have been triggered on [object Object]. Also, toggle test case fails to execute.
it ("should invoke the screenPane click event.", function() {
spyOnEvent($('#screenPane'), 'click');
$('#screenPane').click();
expect('click').toHaveBeenTriggeredOn($('#screenPane'));
});
Please help
While most tags accept or react to a click event, detecting it may prove difficult on the various platforms and browsers. You would probably be better checking to see if the CSS classes that toggle() deals with have been swapped in response to the click. For checking anything that is going to get moved around, simply check the starting X/Y coordinates and then compare them to the ones when the animation is finished and just check to see if they are different (so as to not create a brittle situation with strictly defined values.)
//Checking coordinates
it ("should invoke the screenPane click event.", function() {
var coords = $('screenPane').offset();
$('#screenPane').click();
var newCoords = $('screenPane').offset();
expect(newCoords).not.toEqual(coords);
});
//Checking classes
it ("should invoke the screenPane click event.", function() {
var classes = $('screenPane').val('class');
$('#screenPane').click();
var newClasses = $('screenPane').val('class');
expect(classes).not.toEqual(newClasses);
});
I'm having problems with iron-ajax and data binding in Polymer 1.0.2. Not even a slightly changed example from the Polymer documentation is working.
Here is the code with my changes:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
</head>
<body>
<template is="dom-bind">
<iron-ajax
auto
url="http://jsonplaceholder.typicode.com/posts/"
lastResponse="{{data}}"
handleAs="json">
</iron-ajax>
<template is="dom-repeat" items="{{data}}">
<div><span>{{item.id}}</span></div>
</template>
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app');
window.addEventListener('WebComponentsReady', function() {
var ironAjax = document.querySelector('iron-ajax');
ironAjax.addEventListener('response', function() {
console.log(ironAjax.lastResponse[0].id);
});
ironAjax.generateRequest();
});
})(document);
</script>
</body>
</html>
All I changed was entering a URL to get a real JSON response and setting the auto and handleAs properties. I also added a small script with a listener for the response event. The listener is working fine and handles the response, but the spans in the dom-repeat template aren't rendered.
I'm using Polymer 1.0.2 and iron-elements 1.0.0
It seems the documentation you is missing a - character in the lastresponse attribute of the example.
You must change lastResponse to last-response.
Look at this example from the iron-ajax github page.
when you use a attribute on a element, you have to convert the camelcase sentence to dashes sentence, I mean:
lastResponse is maps to last-response
Property name to attribute name mapping