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
}
Related
Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="date" id="date" class="form-control">
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
minDate : 'now'
});
});
</script>
DatePicker
According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:
let dateToday = new Date();
$('#date').datepicker({
daysOfWeekDisabled: '0, 6',
minDate: dateToday
})
In your case, the problem is you have input type as date but if you change that to test it will work.
Working Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
<script type="text/javascript">
$(function () {
$("#date").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate : 'now'
});
});
</script>
</head>
<body>
<input type="text" id="date" />
</body>
</html>
How can I disable only two future dates after today for instance
today is 2020-12-26 but then 2020-12-27 and 2020-12-28 to be disabled like that. and all past dates must be enabled . I tried searching everywhere but no luck all I see is to disable all future dates which I don't want. Your help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
maxDate: 0
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
</html>
I think its related to this question JQuery ui - date picker, disabling specific dates but you just get the next two days like this and assign it to unavailableDates.
var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;
unavailableDates = [nextday,nextday2];
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;
unavailableDates = [nextday,nextday2];
$("#datepicker").datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ unavailableDates.indexOf(string) == -1 ]
}
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
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 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
I' m using jquery ui datepicker.
I have two datepicker on the page, from and to datepickers
when i select a date in one datepicker i update the max and min date to the second datepicker.
my problem is that just before it close(hide) the seleted datepicker,
it show the second datepicker instead of the first one (just when i update the min date of the second datepicker) and then close it.
why does it show the second datepicker when i update the min date from the other datepicker?
how can i hide the datepicker before i update the second datepicker?
<!doctype html>
<html >
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input name="fromDateCalendar" type="text" value="10/12/2013" id="fromDateCalendar" style="width:100px;" />
<input name="toDateCalendar" type="text" value="09/01/2014" id="toDateCalendar" style="width:100px;" />
<script>
$(function () {
$('#fromDateCalendar').datepicker({
onSelect: function (date) {change1(date);}});
$("#toDateCalendar").datepicker({
onSelect: function (date) {change2(date);}, maxDate: '0' });
});
function change1(date) {
$('#toDateCalendar').datepicker('option', 'minDate', date);}
function change2(date) {
$('#fromDateCalendar').datepicker('option', 'maxDate', date);}
</script>
</body>
</html>
to solve the problem of showing the #2 datepicker for a moment(in the place of the #1 datepicker) when i change the max date,
i call the ....datepicker('option', 'minDate', start) after the #1 datepicker close with setTimeout
onSelect: function (date) {
setTimeout(function () {
....datepicker('option', 'minDate', start)
}, 300)
}....