I have dynamically created textbox in my javascript, the problem is in dynamically created textbox i need to use datepicker as i am new to javascript
kindly help
thanks
row_no4=0;
var index=1;
function addRow_otherschsp(tbl4,row5){
var textbox3a = '<input type=\"text\" size = \"10\" maxlength= \"10\" name=\"othrFA3'+tick+'\" id=\"othrFA3'+tick+'\" placeholder=\"dd/mm/yyyy\" >';
var newRow = tbl4.insertRow(row_no4);
var newCell = newRow.insertCell(0);
newCell.innerHTML = label3;
var newCell = newRow.insertCell(1);
newCell.innerHTML = "From "+textbox3a+ "To &`enter code here`nbsp;"+ textbox3b;
row_no4++;
}
$(function (){
$('body').on('focus',".mydatepickers", function(){
$(this).datepicker();
});
});
Use JQUERY
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
More Details here
You can use this jquery http://jqueryui.com/datepicker/ it will be simple
You must download and include the jquery datepicker plugin in your page.
Then, include a class to the dynamically generated text box like this:
function addRow_otherschsp(tbl4,row5){
var textbox3a = '<input type=\"text\" size = \"10\" maxlength= \"10\" name=\"othrFA3'+tick+'\" id=\"othrFA3'+tick+'\" placeholder=\"dd/mm/yyyy\"
class=\"mydatepickers\">';
.....}
Now in your document.ready() add the following code:
<script>
$(document).ready(function() {
$( ".mydatepickers" ).datepicker();
});
</script>
you need to add necessary jQuery files when working with the datepicker control.
Add all the dependencies of datepicker as mentioned in the jQuery Datepicker documentation.
After that wind up your textbox with datepicker method of jQuery like this:
$(function(){
$('input[name="othrFA3*"]').datepicker();
});
or else you can add id attribute to your dynamically generated input element
say the id as: datepicker
now your javascript becomes
$(function(){
$(#datepicker').datepicker();
});
Related
I've spent hours trying to figure this out, since I feel like I should do that before asking a question here. Searched, looked at answers, tried stuff. I think I learn that way and expand my skills/knowledge.
At any rate, I'm trying to just get started using a sidebar to make my sheets script app work better, and testing in small pieces. I want the Clear Old button (at this point) to simply open an alert box with the date in it, fed from a text box generated by datePicker.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<base target="_top">
</head>
<body>
<p><strong>Clear Old Entries</strong></p>
<p>Clear Entries before</p>
<p><input type="text" id="datepicker"></p>
<p><input type="submit" value="Clear Old" onClick="google.script.run.ClearOld(document.getElementById(datepicker).value)" /></p>
<p><input type="button" value="Close Sidebar" onClick="google.script.host.close()" /></p>
</body>
</html>
And here is the script code that gets the menu item and the sidebar, as well as the function I'm trying to use as a short term test:
function onInstall(e) {
onOpen(e);
}
function onOpen(e) {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Bulletinator')
.addItem('Create Bulletin', 'bulletinatorSidebar')
.addItem('Clear Old', 'clearOldSideBar')
.addToUi();
}
function bulletinatorSidebar() {
var html = HtmlService.createHtmlOutputFromFile('BullV2Side')
.setTitle('Bulletinator')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}
function clearOldSideBar() {
var html = HtmlService.createHtmlOutputFromFile('ClearOldSide')
.setTitle('Clear Old Entries')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}
var today;
var todayDay;
var todayDate;
var ui = SpreadsheetApp.getUi();
var sh = SpreadsheetApp.getActiveSheet();
var rg = sh.getDataRange();
var vA = rg.getValues();
var rowsFound = 0;
var rowsDeleted = 0;
function ClearOld(value) {
var clearDate=value;
var testThis = ui.alert(
'Clear entries prior to',
clearDate,
ui.ButtonSet.YES_NO);
When I click the button in the sidebar there is no response, and nothing shows up in the execution transcript.
On a side note, I also struggled with being able to have two datePickers in the sidebar; only one worked. So that is why this setup has two separate sidebars getting called.
Thanks for any help.
It seems, the datepicker variable is not defined. you have to use the next code
onClick="google.script.run.ClearOld(document.getElementById('datepicker').value)"
or
onClick="google.script.run.ClearOld($('#datepicker').val())"
I just created input date field and tried to change the format. but unable to achieve. is this possible to change the format?
Code Snippet:
<form>
<input value="i want to show 09/09/2015" /><br><br/><br/>
<input type="date" id="dt" value="2014-09-09"/>
</form>
http://jsfiddle.net/HudMe/626/
I wanna show dd/mm/yyyy format.
Use the below datepicker.
https://jqueryui.com/datepicker/
Add below line your script.
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy'
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You can change formate of dat by:
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", <SPECIFY Date Formate here>);
});
});
Assuming you want to change <input type='date'> format so there is no way possible to change the format in <input type="date">.
But you can use https://jqueryui.com/datepicker/ instead of it. see also http://api.jqueryui.com/datepicker/.
After you can change you date format like below :
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
In Google Chrome it works fine !
For firefox
add small js
(function(){
var target = document.getElementById("dt");
var val = target.getAttribute ('value');
val = val.split("-").reverse().join('-');
target.setAttribute('value',val);
})();
to your fiddle
I want to dynamically change the language of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) and I'm getting an "undefined" error for the lang1 inside the last plug-in call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datatimepicker</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
</head>
<body>
<input id="datetimepicker" type="text" placeholder="Datetimerpicker">
<input id="lang" type="text" placeholder="language" value="en"><div class="select">select language</div>
<script>
var lang1;
$(".select").click(function(){
lang = $('#lang').val();
lang1 = '"'+lang+'"';
return lang1
});
$(".select").click(function(){
console.log(lang1);
$('#datetimepicker').datetimepicker({
lang: lang1
})
});
</script>
</body>
</html>
Shouldn't this work?
You defined two click handlers which you expect to somewhat magically exchange the lang1 variable.
Probably you intended this:
$(".select").click(function(){
var lang = $('#lang').val(); // 1
console.log(lang); // 2
$('#datetimepicker').datetimepicker({ lang: lang }); // 3
});
Get the current lang value from input field #lang
Log it to the console
Initialize the datepicker to use the language lang.
Hello I have the following hml page.
I need to apply the jQuery ui Tabs plugin to the dynamically added elements.
how can I get that.
please note that when I add <li> elements as string that work fine but when i use document.createElement it dont work instead I get the same html structure when I inspect these elements
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http:/resources/demos/style.css">
</head>
<body>
<div id="tabs">
<ul>
<li>Sample0</li>
</ul>
<div id="tabs0">
<p>exemple1</p>
</div>
</div>
<input type="button" onclick="ReloadTabs()" value="rebuild"/>
<script>
$(function() {
$("#tabs").tabs();
});
//add tabs and recreate my tabs
function ReloadTabs() {
var liElement1 = document.createElement('li');
var anchElement1 = document.createElement('a');
$(anchElement1).attr("href", "tab1");
$(liElement1).append(anchElement1);
var liElement2 = document.createElement('li');
var anchElement2 = document.createElement('a');
$(anchElement2).attr("href", "tab2");
$(liElement2).append(anchElement2);
$("#tabs ul").append(liElement1);
$("#tabs ul").append(liElement2);
$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
}
</script>
</body>
</html>
you can try like this
change html for your button
<input type="button" id="rebuild" value="rebuild"/>
change your js code
$(function() {
$("#tabs").tabs();
$(document).on('click', '#rebuild', function() {
var ul = $('#tabs').find('ul');
var liElement1 = $('<li />');
$(liElement1).append('<a href="#tab1" >tab1</a>');
var liElement2 = $('<li />');
$(liElement2).append('<a href="#tab2" >tab2</a>');
$(ul).append(liElement1);
$(ul).append(liElement2);
$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
});
});
also check in jsfiddle
http://jsfiddle.net/0jp0xpmu/1/
I am not sure but i think it's helpful to you.
What i want to do is that when i click on the button "1" it should display the number "1" in the textbox above it.
what is wrong with my jquery code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input id="textbox" type="text" />
<div>
<input id="1" type="button" value="1" />
<input id="2" type="button" value="2" />
<input id="3" type="button" value="3" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/ext.js"></script>
</body>
My jquery
$('#1').click(function)({
var txt = $('#textbox');
$('#1').html('txt');
});
Try this code
$('input[type="button"]').click(function() {
var txt = $(this).val();
$('#textbox').val(txt);
});
Will explain your problem with your jQuery code:
Line 1:
You registered with #1 button so this will be triggered on when button 1 is click, I made it generalised
Line 2:
You are getting value from textbox, whereas you are supposed to take value from button text.
Line 3:
You are assigning value in button, whereas you are supposed to assign to textbox and always use val() for input type of control and html() for other html container controls
The above were your errors explained.
Queries welcomed!
Fiddle demo
$(function(){
$('input[type="button"]').click(function(){
$('#textbox').val($(this).val());
});
});
You have to get the value using val() method. Also, you are passing variable txt as string to the html() function which is wrong. Try the below...
var txt = $('#textbox').val();
$('#input1').html(txt);
Try this
$('input[type="button"]').click(function() {
$('#textbox').val($(this).val());
});
You can try this one
$('div').on('click', 'input', function () {
$('#textbox').val(this.value);
});