I encounter this problem. What I want to do is, I want to retrieve the value of the datepicker and store it in the variable, then I wanted the value to popup. However, when I click Go button , I got the undefined as the value.Here's my code :
<!doctype html>
<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.2/themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true});
});
</script>
<style>
div.ui-datepicker{font-size:10px;}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<input value=" Go " onClick="Go_OnClick()" type="button">
<script>
function Go_OnClick(){
dateVariable = $("datepicker").val();
alert(dateVariable);
}
</script>
</body>
</html>
You missed # for IDselector, and that might not be good practice to retrieve date with using .val() you'll get string value, to retrieve date:
You need to use getDate()
function Go_OnClick(){
dateVariable = $("#datepicker").datepicker('getDate'); //getDate and # for ID selectror
alert(dateVariable);
}
you are missing # when we are trying to get the val of datepicker.
So use $("#datepicker").val(); in Go_OnClick() methos and it will work
You have a typo.
Change dateVariable = $("datepicker").val(); to dateVariable = $("#datepicker").val();
You were missing one # before datepicker
Related
In a google sheet I have a button which open a Jquery datepicker, calling doGet function.
I want to capture the date value given by the user. How can I do it?
Here my .gs:
function doGet() {
var output = HtmlService.createTemplateFromFile('DatePicker')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(250)
.setWidth(200)
.setTitle('Select date');
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(output, 'Date');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
and the html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<?!= include('Style'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
});
</script>
</head>
<body>
<div id="myCalendar">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Any comment will be helpful
Date objects can't be passed from client-side code to server-side code but you can pass the date as milliseconds or as a string then create a Date object on the server side.
Resources
https://developers.google.com/apps-script/guides/html/communication#parameters_and_return_values
Related
UI to HTML, conversion will not write a date to the sheet
A couple things you need to do:
Read the HTML Service: Communicate with Server Functions article, which describes how to do this.
You likely should rename your doGet() function as that's reserved for web apps, which shouldn't allow triggering the opening of a modal in your spreadsheet.
Add a function in your server-side code to receive the date.
Create an event handler in your client-side script to pick up date changes. You could create a button to trigger this, but I've gone with jQuery's .change() method.
Use google.script.run to send the date value to the backend.
function showModal() {
var output = HtmlService.createTemplateFromFile('DatePicker')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(250)
.setWidth(200)
.setTitle('Select date');
SpreadsheetApp.getUi().showModalDialog(output, 'Date');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function receiveDate(dateStr) {
console.log(dateStr);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<?!= include('Style'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
$('#datepicker').change(function() {
google.script.run.receiveDate(this.value);
});
});
</script>
</head>
<body>
<div id="myCalendar">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I recently started JQuery and I need to create a list using the datepicker JQuery function. The problem starts with my prepend because I have to prepend the date I get from the datepicker, the event AND a new button to ERASE whatever's in that line (so the button must be prepended along the list item). I'm having some trouble with this part.
This is the code I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month & year menus</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="css.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(document).on('click', '#bta', '#apagar', function () {
if ($('#datepicker').val() != '' && $('#evento').val() != '' ) {
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>');
$('input').val('');
}
});
</script>
</head>
<body>
<div id="box">
Lista de Tarefas:
<br><br>
Date: <input type="text" id="datepicker">
Event: <input type="text" id="evento"> <button id="bta" class="bta">+</button>
<div id="caixa"> </div>
</body>
</div>
</html>
I'm pretty sure this is probably very simple but I've only now started looking around and everything I try to search is either overly complex or doesn't resolve my issue... of course my inability to implement the solutions I find might be very well a problem too.
This is to help visualize my problem
jQuery.prepend takes argument that are htmlString or Element or Array or jQuery elements. You choose a htmlString, but are adding a jQuery object to this string. This will obviously not work.
What do we actually want? Well, we want to create a <p> tag, then append the datepicker value, the event value and then the button.
var $p = $("<p></p>");
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />'));
$('#caixa').prepend($p);
Alternatively, skip the step where you turn a string into a jquery object, back into a string.
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>');
I am writing an html file to take date input. I am using date picker to select the date, instead of selecting date from the date picker, if the user is manually typing the date in text field for ex: 09/31/16 I need to give information to the user that date is invalid date. But my code given below is taking as october 1st 2016 when I created the date object. if I am converting date to ISOString it is displaying as 30th sept. But my desired output is to display the message to the browser as an "Invalid date". Please help me as I have to resolve this because I am going to use dates at many places during my development. Thank You.
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
function verifyDate() {
var d = new Date($("#datepicker").val());
console.log(d);
var d = new Date($("#datepicker").val()).toISOString();
console.log(d);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onblur="verifyDate()"></p>
</body>
</html>
if you want to get the date on user selection, your code should be like:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
onSelect: function(){
var dateValue = $(this).datepicker('getDate');
console.log(dateValue);
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" ></p>
</body>
Following way of validating dates can help in this:
let dateObj = document.getElementById("datepicker");
if (dateObj.validity.badInput) {
// show error message
}
I have this div:
<h1>$340</h1>
I need to detect if inside of this div there is a dollar symbol,
If so - remove it
I'll explain again:
I have got this code so far so I manage to detect if the symbol is in the div, but I can't figure how to remove it and update the DOM?
var sign = $('h1').text();
if (sign.indexOf("$") >= 0) {
//remove the sign
}
This is quite easy using a simple regex
var div = $('your selector here');
div.html(div.html().replace(/\$/g, ''));
That's what I have meant, without the If condition:
$('h1').text( $('h1').text().replace("$", ''));
Something like this should work:
$("h1").each(function() {
var $el = $(this);
var text = $el.text().replace("$", "");
$el.text(text);
});
Try like this
var price = $("h1").html().replace(/[^\d\.]/g, '');
console.log(price);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - 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>
<script>
$( document ).ready(function() {
var val=$('#demo').html().replace('$','');
$( "div" ).replaceWith( val );
});
</script>
</head>
<body>
<h1 id='demo'>$540</h1>
</body>
</html>
Jquery can select based on contents. See https://api.jquery.com/contains-selector/.
What you need to do is:
$( "div:contains('$')" ).remove();
$(function() {
$("#button").click(function() {
var input = $("#input").val();
input = input.replace('$', '');
$("#input").val(input);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="input" placeholder="type here..." />
<button id="button">Remove</button>
</body>
</html>
This is the JQuery approach, I used replace on click on button to remove $ from input.
function HasDollar() {
if($("h1").html().indexOf("$") != -1)
return true;
else
return false;
}
try this.