Asp.Net Date Picker Control from the Text Box - javascript

I have 2 Text box accepting date from the calender control. One is From & another is To.
I would like take the date accordingly as follows.
On the 1st text box(from),It can only take the today & any other Previous date.
But, the 2nd text box(To),It takes the today date & it should take the date not less than the date which is taken on the 1st text box.
how can i do this in .net.
This is my code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtfrom").datepicker({ maxDate:0 });
});
</script>
<script type="text/javascript">
$(function () {
$("#txtto").datepicker({});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>From:</b> <asp:TextBox ID="txtfrom" runat="server" />
&nbsp &nbsp
<b>To:</b><asp:TextBox ID="txtto" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
My first text box is working properly.But Can you help on the codeing of 2nd text box.

Set up your datepickers like this:
$("#txtFrom").datepicker({
onSelect: function (selectedDate) {
$("#txtTo").datepicker("option", "minDate", selectedDate);
}
});
$("#txtTo").datepicker({
onSelect: function (selectedDate) {
$("#txtFrom").datepicker("option", "maxDate", selectedDate);
}
});
What it effectively is doing is to change the option minDate and maxDate for txtFrom and txtTo respectively, when the date is selected in the datepicker.

Just add a new rows as you have done for to date:
$(function () {
$('[id$=txtTo]').datepicker();
$('[id$=txtFrom]').datepicker();
});
And there is no need to Use {}
if you want to add ranges then try the below code:
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtTo]').datepicker("option", "minDate", selectedDate);
}
});
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtFrom]').datepicker("option", "maxDate", selectedDate);
}
});

remove the {} in
$("#txtto").datepicker({});
I think.

Related

How to disable past days and weekends in Jquery

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 to return a value using Date picker in HTMLService / Google Script / Sheet?

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>

How to call the date picker function when focus on textbox from Jquery-UI?

When focus on the text box the date picker should appear. That date picker should have the year option.
This is what first I tried to show the date picker dialog box. But I don't know what i did wrong in it.
i think i did a mistake on the header file
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDateFrom" CssClass="form-control" runat="server" Width="200px"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
$("#datepick").datepicker({
dateFormat: "dd-mm-yyyy"
});
$("#txtDateFrom").focus(function () {
$("#txtDateFrom").datepicker("show");
});
$("#txtDateFrom").focus();
});
</script>
</div>
</form>
</body>
I want to show the year option as well.
I saw this Jfiddle. But I don't know why it doesn't work in my case.
Updated
Error message
Uncaught TypeError: Cannot read property 'settings' of undefined
at Datepicker._get (jquery-ui.js:8633)
at Datepicker._showDatepicker (jquery-ui.js:7910)
at HTMLInputElement.<anonymous> (jquery-ui.js:9256)
at Function.each (jquery-3.1.1.js:368)
at jQuery.fn.init.each (jquery-3.1.1.js:157)
at jQuery.fn.init.$.fn.datepicker (jquery-ui.js:9253)
at HTMLInputElement.<anonymous> (test.aspx:36)
at HTMLInputElement.dispatch (jquery-3.1.1.js:5202)
at HTMLInputElement.elemData.handle (jquery-3.1.1.js:5010)
at HTMLInputElement.trigger (jquery-3.1.1.js:5325)
Finally I found my solution by myself.
This is the answer for my questions.
<asp:TextBox ID="txtDateFrom" CssClass="form-control" runat="server" Width="200px"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
$("#txtDateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeYear: true,
changeMonth:true
});
$("#txtDateFrom").focus(function () {
$("#datepick").datepicker("show");
});
$("#txtDateFrom").focus();
});
</script>

Date picker modal scrolls down the page

I am using Material Design and using its date picker. When date picker pops out, the page scrolls down. How can I load the date picker modal without the page scrolling down?
<input id="client-edit-birth-date" type="text" class="datepicker validate">
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
container: 'body'
});
I had the same problem and resolved it by setting container to html.
...
container: 'html',
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
demo http://jsfiddle.net/DBpJe/5106/
I do it by utilizing beforeShow function of datepicker:
$('.datepicker').datepicker({
...
beforeShow: function(input, inst)
{
inst.dpDiv.css({position: 'absolute'});
}
...
});
There you can set the position of datepicker's dialog. You have to experiment to find out what kind of css parameters would more suitable in you case/page layout.

Retrieving Value from Datepicker

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

Categories