I have used a jquery datepicker in my code for user input.But i have a requirement where i have to display only 5 days from a specific date in my jquery datepicker excluding weekends.Could you please assist as i am new to jquery?
Regards,
Miru
I have fetched the 5 days from dat_eta in to an array in a hidden variable.Now i need to know how to enable only these days in the datepicker.
Please find the code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JAVASCRIPT_CALENDAR_TESTING.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../Content/themes/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.8.2.js"></script>
<script src="../Scripts/jquery-ui-1.8.24.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Request date:</td>
<td><input type="text" id="datepicker" /></td>
<%
int scm_date;
scm_date = (9 / 24 + 1);
DateTime dat_eta = DateTime.Now;
string result;
dat_eta = dat_eta.AddDays(scm_date);
result = dat_eta.ToString("MM:dd:yyyy");
string[] array = new string[6];
for (int i = 0; i <= 5; i++) {
if (i == 0) {} else {
dat_eta = dat_eta.AddDays(1);
}
result = dat_eta.ToString("MM:dd:yyyy");
array[i] = result;
}
hiddenvalue.Value = string.Join(",", array);
%>
<td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server" /></td>
</tr>
</table>
<script type="text/javascript">
</script>
</div>
</form>
</body>
</html>
You can use the beforeShowDay option.
/*
* let's assume your array is like the following one
*/
var datValues = ['03:11:2018','03:12:2018','03:13:2018'];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
return [datValues.indexOf($.datepicker.formatDate('mm:dd:yy', date)) > -1];
}
});
<link href="https://code.jquery.com/ui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Request date:</td>
<td><input type="text" id="datepicker"/></td>
<td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server"/></td>
</tr>
</table>
</div>
</form>
Related
I have a CSS flip, that activates on a button click. the issue is when I place it in the in asp.net the flip doesn't work. I dont know if the asp.net form auto refreshes any help would be appriciated.
*/The Css /*
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
And it works in the below format
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
</form>
<div class="flip-container" id="FLIPDIV">
<div class="flipper">
<div class="front">
Front
<button onclick="Flip()">Flip Me!</button>
</div>
<div class="back">
Back
</div>
</div>
</div>
</body>
</html>
<script>
function Flip() {
var x = document.getElementById('FLIPDIV');
x.classList.toggle('hover');
}
</script>
As soon as I try it in an ASP.NET Form the flip does not work. I need the form for ASP:textboxes etc..
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="flip-container" id="FLIPDIV">
<div class="flipper">
<div class="front">
Front
<button onclick="Flip()">Flip Me!</button>
</div>
<div class="back">
Back
</div>
</div>
</div>
</form>
</body>
</html>
<script>
function Flip() {
var x = document.getElementById('FLIPDIV');
x.classList.toggle('hover');
}
</script>
I am going to assume the form does some can of refresh on any button press etc.. but I am no expert any help would be amazing :)
Your button is placed within a form and it has no type attribute defined.
In this case it is assumed as type="submit", so on every click it simply submits your form and Flip() function can't show any visual changes.
Change your button this way:
<button type="button" onclick="Flip()">Flip Me!</button>
It should work now.
I want to run jquery code when i click on a button.
This is my jquery code:
<script src="scripts/jquery-1.4.1.js"></script>
<script type ="text/javascript" >
$(document).ready(function () {
$('#searchtextbtn').click(function () {
alert("Hello");
});
});
</script>
And my html looks like:
<body>
<div id="content_inner">
<div class ="page_header">
<h2>Location Master</h2>
<div id="search">
<table width="100%">
<tr>
<td align="left">
<font color="#AFBECF">#Html.Label("Search")</font>
</td>
<td>
<input id="searchtextbtn" type="submit" value="search">
<input id="searchtextbtn" type="button" value="search"> #*not woring*#
</td>
</tr>
</table>
</div></div></div>
But here when i click on the button nothing happens.
This is the page once I run my project:
When I click on the "Location Master" link, partial view will be displayed like this:
which contain search button.
Add the following CDN to your code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
I have (I think) a simple problem. I'm building application with Asp.net and I want to show something (for example "!!!") after user left empty textbox. I cannot use standard validation components in Asp.net because it blocks every postback.
My attempt:
<html>
<head runat="server">
<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).next('.validation-alert').show();
}
else {
$(this).next('.validation-alert').hide();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Validation test</h1>
<div>
<table>
<tr>
<td>
<asp:TextBox ID="TbName" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TbMessage" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Focus lost is calling my function but the problem is that this:
$(this).next('.validation-alert')
will not find the next needed object... What am I doing wrong?
Thanks for your help.
Because .validation-alert is not the next sibling of .validation-control-is-not-empty, they are the children of same tr, so you can find the tr parent of this and then find the .validation-alert element within it.
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).closest('tr').find('.validation-alert').show();
} else {
$(this).closest('tr').find('.validation-alert').hide();
}
});
You can shorten it using .toggle() like
$('.validation-control-is-not-empty').focusout(function () {
$(this).closest('tr').find('.validation-alert').toggle($(this).val() === '');
});
Demo: Fiddle
I'm trying to follow this example. To export an HTML table to MS Excel format using jQuery.
Here's my .aspx:
<head runat="server">
<title></title>
<script src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="tbl" runat="server">
</asp:Table>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
The .js (JScript2.js):
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#tbl').html());
e.preventDefault();
});
... And the codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class JQuery_Export_To_Excel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TableRow tr = new TableRow();
TableCell tc = new TableCell();
tc.Text = "AAA";
tr.Cells.Add(tc);
tc = new TableCell();
tc.Text = "BBB";
tr.Cells.Add(tc);
tbl.Rows.Add(tr);
}
}
Generated page source:
<!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><title>
</title>
<script src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="JQuery_Export_To_Excel.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTA0OTEwODdkZKr9kRtjn1C5sAo2woCwfF/8uHOVcyNi1bu4OtVBNKlS" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIdFUHUqRwMmhFieKB52uC8avDSflAS9b8PVcR1BxTTBqeDRyg6lH5NKPWh6Jt5ee2zX+bYNkguHBdZjCzKvoJa" />
</div>
<div>
<table id="tbl">
<tr>
<td>AAA</td><td>BBB</td>
</tr>
</table>
<input name="btnExport" type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
</html>
I don't know what I'm doing wrong, but when I click btnExport, nothing happens. How can I fix this problem?
put this in your form
<div>
<div id="container">
<asp:Table ID="tbl" runat="server">
</asp:Table>
</div>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
Put this in the header section with script tag
$(document).ready(function () {
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#container').html());
e.preventDefault();
});
});
I believe nothing is wrong with your code except that since your code is asp.net. you cannot
directly use $('#tbl') . You have to use $("#" +'<%=tbl.ClientID%>')
How can I get hold a session from date picker?
For all my textbox, I hold it using :
Session["location"] = DropDownList1.SelectedItem.Text;
Session["time"] = DropDownList2.SelectedItem.Text;
Session["day"] = DropDownList3.SelectedItem.Text;
Session["IsChauffeurUsed"] = DropDownList4.SelectedItem.Text;
But for my text box date picker, when I write the code
Session["date"] = datepicker.Text;
It gives me an error, the current context does not exist.
The date picker text box is :
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
Hope you can help.
Thanks.
Set runat=server attribute to convert html tag to Html server control.
<input type="text" runat="server" id="datepicker">
and use value attribute because it is now ASP.NET Web Server control.
Session["date"] = datepicker.Value;
Edit: This works perfectly on my side.
<head runat="server">
<title></title>
<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#datePicker").datepicker();
$("#<%=TextBox1.ClientID %>").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="datePicker" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>