使用javascript显示从日期和日期开始的错误消息

时间:2017-04-16 15:41:18

标签: javascript date

我发布完整的aspx代码虽然我知道我不应该发布我的完整代码来表明这是我发布aspx代码的代码,因为在这里我们使用 面板,ajax等 此代码中的主要内容是从日期和日期开始的 粗体和斜体 我不应该允许用户从日期输入如果从日期大于日期并且从日期和日期不应大于今天日期,我还不应允许从日期到日期不超过今天的日期我需要向用户显示标签消息< / p>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home1" %>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtTAFromDate.ClientID %>").dynDateTime({
showsTime: true,
ifFormat: "%m/%d/%y %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: true,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
$("#<%= txtTAToDate.ClientID %>").dynDateTime({
showsTime: true,
ifFormat: "%m/%d/%y %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: true,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div style="margin-left:10%;margin-top:03%;height:450px">
<ajax:TabContainer ID="TabContainer1" runat="server" CssClass="fancy fancy-green">
<ajax:TabPanel ID="tbpnluser" runat="server" >
<HeaderTemplate>Project wise details & Status </HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlPW" runat="server">
<h4><strong><center> Project wise details & Status </center></strong></h4>
<span>
Select ProjectName:<asp:DropDownList ID="ddlProject" runat="server" AutoPostBack="True" Width="183px" OnSelectedIndexChanged="ddlProject_SelectedIndexChanged"></asp:DropDownList>
</span>
(OR)<span>
Status:<asp:DropDownList ID="ddlStatus" runat="server" Visible="true" AutoPostBack="True" OnSelectedIndexChanged="ddlStatus_SelectedIndexChanged" >
</asp:DropDownList>
</span><span>
(OR) Domain:<asp:DropDownList ID="ddlDomain" runat="server" Visible="true" AutoPostBack="True" OnSelectedIndexChanged="ddlDomain_SelectedIndexChanged" ></asp:DropDownList>
</span>
<span style="float:right">
<asp:Button ID="Button1" runat="server" Text="Export" Visible="false"></asp:Button>
</span>
&nbsp;<div style="width:99%; height: 200px; overflow: auto">
<asp:GridView ID="grdPdetails" runat="server" EmptyDataText="No Records Available">
</asp:GridView>
</div>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnlusrdetails" runat="server">
<HeaderTemplate>Team Activities</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlAW" runat="server">
<h4><strong><center> Team Activities </center></strong></h4>
<div style="padding-left:100px">
<span>
ProjectName:<asp:DropDownList ID="ddlProjectNameTA" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlProjectNameTA_SelectedIndexChanged"></asp:DropDownList> <%----%>
</span>
<span>
(OR) UserName:<asp:DropDownList ID="ddlUsers" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlUsers_SelectedIndexChanged"></asp:DropDownList>
</span>
</div>
<br />
***<b><b><div style="padding-left:100px">
<span>
(OR) From Date<asp:TextBox ID="txtTAFromDate" Width="113px" runat="server" ReadOnly="true" ></asp:TextBox> <img src="calendar.png" />
</span>
<span>
To Date<asp:TextBox ID="txtTAToDate" Width="113px" runat="server" ReadOnly="true" ></asp:TextBox> <img src="calendar.png" />
<asp:Button ID="btnGet" runat="server" Text="GET" OnClick="btnGet_Click"/></b>***
</span>
</div></b> <asp:Label ID="lblErrmsgTA" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
&nbsp;<div style="width:99%; height: 200px; overflow: auto">
<asp:GridView ID="gvTeamActiv" runat="server" EmptyDataText="No Records Available" >
</asp:GridView>
</div>
<asp:Button ID="Button3" runat="server" Text="Export" Visible="false"></asp:Button>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</div>
</asp:Content>

我试过的是

<asp:Button ID="btnGet" runat="server" OnClientClick="return compareDate()"  Text="GET" OnClick="btnGet_Click" />


function compareDate() {
            var from = document.getElementById('<%= txtTAFromDate.ClientID %>').value;
            var to = document.getElementById('<%= txtTAToDate.ClientID %>').value;
            // assuming the date is in dd/mm/yyyy format
            from = toDateObject(from);
            to = toDateObject(to);
            if (from > to)
            {
                alert('start date should be lesser than end date');
                return false;
            }
            return true;

        }
        function toDateObject(dateStr) {
            var parts = dateStr.split('/');
            var date = new Date(parts[2], (parts[1] - 1), parts[0]);
            return date;

        }

1 个答案:

答案 0 :(得分:0)

这是一种集成所需内容的简单方法。这是所有HTML和JavaScript,但实现起来不应该太糟糕。我有一个错误div出现错误。这可以根据你的需要进行设计,但这可以给你一个想法。

&#13;
&#13;
function compareDate() {
            var from = document.getElementById('fromDate').value;//use your asp id instead of 'fromDate'
            var to = document.getElementById('toDate').value;//use your asp id instead of 'toDate'
            // assuming the date is in mm/dd/yyyy format
            from = toDateObject(from);
            to = toDateObject(to);
            var errors = document.getElementById('errors');
            errors.innerHTML = "";
            if (from > to)
            {
                errors.innerHTML += "start date should be lesser than end date<br>";
            }
            if (from > new Date () || to > new Date ()){
                errors.innerHTML += "Dates must be in the past";
            }
            if(errors.innerHTML == ""){
              return true;
            }else{
              return false;
            }
        }
        function toDateObject(dateStr) {
            var parts = dateStr.split('/');
            var date = new Date(parts[2], (parts[0] - 1), parts[1]);
            return date;
        }
&#13;
<div id="errors"></div>
<input type="text" id="fromDate" placeholder="fromDate (dd/mm/yyyy)">
<input type="text" id="toDate" placeholder="toDate (dd/mm/yyyy)">
<input type="button" onclick="compareDate()" value="submit">
&#13;
&#13;
&#13;