1. 程式人生 > >JS獲得日曆控制元件的值並進行日期的比較

JS獲得日曆控制元件的值並進行日期的比較

     我們在前端編輯JSP頁面或HTML頁面時,常會遇到日曆控制元件,獲得日曆控制元件中的值,並且進行兩個或者多個日曆控制元件值的比較,這些通常使用JS來實現的。


比如上述日曆控制元件,如果使用者選擇的開始日期在結束日期之後,那麼系統通常是不允許這樣的不合規的表單資料提交到後臺,而應該是在前端就校驗好。如何用JS獲得控制元件的值再進行比較,我們參考一下如下程式碼:

//檢驗活動結束日期不能早於活動開始日期
var startdate = $("#startDate").val();
var enddate =   $("#endDate").val();
startdate=Date.parse(new Date(startdate.replace(/-/g, "/")));
enddate=Date.parse(new Date(enddate.replace(/-/g, "/")));
var millTime=enddate-startdate;  //時間差的毫秒數
if(millTime < 0){
alert("活動結束日期不能早於活動開始日期!");
return ;
}


獲得日曆控制元件的值,這裡使用的是JQuery來獲值的,然後把值轉成JS中的日曆型別,以方便比較,然後通過計算差值,算出毫秒數。A-B<0說明 A的日期在B之後,那麼可以根據實際業務的需求,編寫出合乎要求的前端JS驗證指令碼了。

相關推薦

JS獲得日曆控制元件進行日期比較

     我們在前端編輯JSP頁面或HTML頁面時,常會遇到日曆控制元件,獲得日曆控制元件中的值,並且進行兩個或者多個日曆控制元件值的比較,這些通常使用JS來實現的。 比如上述日曆控制元件,如果使用者選擇的開始日期在結束日期之後,那麼系統通常是不允許這樣的不合規的表單資

使用Ext.net時如何遍歷Panel或者FormPanel中Content標籤下的控制元件進行驗證

前幾天遇到一個比較複雜的表單格式,如果用Ext.net的佈局做起會比較麻煩(Ext.net這個佈局複雜表單一直是讓人不爽的地方)用Table做起來會比較簡單,於是乎使用了Panel的Content標籤。 結構如下:<ext:FormPanel ID="ContentFo

FastReport 設定Report中控制元件列印

//啟用列印引數 sSql:='Select * from BillBHMaster Where MBHNo=' + QuotedStr(sBillNo) + ' and IsPrint=''Y'''; //這一行為自己寫的函式,

js 獲取 repeater 控制元件

你要想獲得Repeater裡伺服器控制元件(runat="server")的值 必須先知道Repeater裡伺服器控制元件ID的命名方式 如果你的頁面裡的資料只是只讀資料可以採用“pwroselove”提供的方法 去掉runat="server" 自己為控制元件的ID命名

分享自己編寫的一個jquery日曆控制元件,可以選擇日期區間

先來個截圖   初版未經全面測試,難免有bug,功能比較單一,簡單說一下功能吧 1、可以選擇單個日期 2、可以選擇日期區間 3、面板顯示月份可以自定義 4、日期格式可以自定義,但是目前只支援幾種(格式見js內部) 5、準備增加確定和取消按鈕的回撥函式 其他功能暫時沒有想到,所以都沒加,目前V1.0版本

unigui js操作delphi控制元件

  在js中介面上所有元件都當成html裡來控制 1、控制按鈕事件  document.getElementById(MainForm.UniButton4.getId()).click(); 這個方法讓JS與UNI互動提供太大的幫助了 js cod

selenium - js日曆控制元件處理

# 13. js處理日曆控制元件''' 在web自動化的工程中,日曆控制大約分為兩種: 1. 可以直接輸入日期 2. 通過日曆控制元件選擇日期 基本思路: 利用js去掉readonly屬性,然後直接輸入時間。'''from selenium import webdriverdr

【Bootstrap Table】在指定列中新增下拉框控制元件獲取所選

背景   最近在使用Bootstrap table ,有一個在某一列新增一個下拉列表,並且通過 “getAllSelections”方法獲取所選行的需求,在實現這個功能的時,走了一些彎路,遇到了一些坑。所以今天總結出來,既是自己的學習,也分享給大家,

JS日曆控制元件集合----附效果圖、原始碼

在進行開發的過程中,經常需要輸入時間,特別是在進行查詢、統計的時候,時間限定更為重要。       儘管ASP.NET也集成了日曆控制元件,但是其整合的程式碼量很大,你可以做一個測試,當你在頁面使用一個日曆控制元件時,在釋出之後檢視該頁面的原始碼,你會驚奇發現,日曆控制元件

一款JS日曆控制元件

這是一款來自codefans的日曆控制元件,相容ie,chrome,firefox... <html> <head> <title>JS日期選擇器</title> <script type="text/javascript"> function

WPF通過委託跨頁面修改介面控制元件原理完全解析

網上有很多講WPF修改控制元件的,但是大部分都只是程式碼佔據了很大的篇幅,沒有詳細講解過程。所以有了我這篇文章。我希望每一個看到這篇文章的朋友都可以看懂,另外不要被太長的標題嚇到。 通過委託跨頁面修改控制元件,所謂的原理就是,構造一個可以觸發事件A的靜態類,然後對頁面做出

WebForm框架頁面上js修改服務端控制元件導致後臺不能正確獲取到控制元件的問題【總結】

WebForm框架頁面上js修改服務端控制元件導致後臺不能正確獲取到控制元件值的問題 頁面程式碼 <td><span id="sp_notice_type_item">公告型別</span></td

layDate.js日曆控制元件開發開始時間和結束時間的級聯

做開發時,以為專案的需求的,需要做到時間的開始時間和結束時間的級聯,就用了layDate.js這個日曆外掛,失效的效果,就是開始時間必須小於結束時間,結束時間必須大於開始時間,效果請看下圖layDate.js請到http://www.layui.com/laydate/下載最

WPF 獲取 ListView DataTemplate 中控制元件

原文: WPF 獲取 ListView DataTemplate 中控制元件值 RT 雖然DataTemplate 是用來繫結的,一般用ONE TWOWAY 來繫結傳遞或獲取資料. 但是今天這個需求真是沒辦法,在繫結的模板內添加了一個非繫結的資料,需要手動取值. 解決方案原理:

Android UI-自定義日曆控制元件

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

WPFS資料繫結(要是後臺類物件的屬性發生改變,通知在“客戶端介面與之繫結的控制元件”也發生改變需要實現INotitypropertyChanged介面)

WPFS資料繫結(要是後臺類物件的屬性值發生改變,通知在“客戶端介面與之繫結的控制元件值”也發生改變需要實現INotitypropertyChanged介面) MainWindow.xaml 1 <Window x:Class="WpfApplication1.MainWindow" 2

WPF中Popup和ContextMenu類無法以常規方式繫結資料和命令,但只能通過引數PlacementTarget獲得控制元件

比如 <Window x:Name="window"> <ItemsControl Items="{Binding BookItems}"> <ItemsControl.ItemTemplate> <DataTemplate&g

js獲取el表示式的顯示

後臺傳過來的值我們可以用el表示式獲取並顯示,但有時直接顯示到網頁上不太明顯,通過js可以獲取到el表示式的值並彈窗顯示,程式碼如下: <script type="text/javascript"> var msg = "${msg}"; if(msg!=''){

FineReport——獲取控制元件和單元格

分享一下我老師大神的人工智慧教程吧。零基礎,通俗易懂!風趣幽默!http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

C#賦進行簡單計算(dotnetcore)

使用vscode在dotnetcore環境下開發,C#賦值並進行簡單計算 建立dotnetcore專案:不會的參考: 使用vs code 建立.net core控制檯應用程式 : https://blog.csdn.net/qq_36051316/article/details/84