1. 程式人生 > >用javascript實現input框日期時間格式化輸入

用javascript實現input框日期時間格式化輸入

在頁面程式碼中使用
...
<script language="javascript" src="../public/datetime.js"></script>
<script language="javascript" type="text/javascript">
...
function submit()
{
...
if(isDate("starttime")==false){return false;}//提交時檢查時間是否輸入正確
...
}
</script>
...
時 間:<input name="datetime" type="text" onkeyDown="inputdatetime('starttime')"  value="0000-00-00 00:00:00" size="20" maxlength="19"  />
...
<script language="javascript" type="text/javascript">
document.all("datetime").value=changedatetime("datetime");//將時間格式化
</script>

日期時間格式化函式
datetime.js
function inputdatetime(objectname)
{
var oInput=document.all(objectname);
var range=document.all(objectname).createTextRange();//為元素建立一個 TextRange 物件。
var selrange = document.selection.createRange();//從當前文字選中區中建立 TextRange 物件
var startpos = 0,endpos = 0;
var oLeft;
var oRight;
var oLength;
var pos;
var cursorpos=0;//游標下一個相對位置
var cursorpos1=0;//游標結束位置
var keytext;
var curtext=range.text;//當前input框文字
var charbuff;//暫存字元
while(selrange.compareEndPoints("StartToStart",range)>0)//比較 TextRange 物件的結束點和其它範圍的結束點。
{
selrange.moveStart("character",-1);//更改範圍的開始位置。Moves one or more characters
startpos ++;
}
oLength=curtext.length;

if(startpos>18)//游標位置超出範圍
   {   
    if(event.keyCode==8)//後退鍵特殊情況
        { oLeft=curtext.substring(0,startpos);oRight="0";
          oInput.value=oLeft+oRight;
          range.moveStart("character",19); 
          range.collapse(true);//將插入點移動到當前範圍的開始或結尾。 
          range.select();
          } //將當前選中區置為當前物件。}
    else if(event.keyCode==46||event.keyCode==39||event.keyCode==40)
          {         
          range.moveStart("character",19); 
          range.collapse(true);
          range.select();
        }
    else if(event.keyCode==37)//向前鍵
          {         
          range.moveStart("character",19); 
          range.collapse(true); 
          range.select();
        }
    else if(event.keyCode==38)//向上鍵
          {
          range.moveStart("character",18); 
          range.collapse(true); 
          range.select();
        }
    else{
         oInput.value = curtext.substring(0,18);
         range.moveStart("character",18);
          range.moveEnd("character",19);
         range.collapse(true); 
          range.select(); //將當前選中區置為當前物件。
         }
    }
else if(event.keyCode>47&&event.keyCode<58)//按鍵是數字
   {
    if(startpos==0)
        {oLeft="";oRight=curtext.substring(1,oLength);cursorpos=0;cursorpos1=1;}  
     else if(startpos==4||startpos==7)
        {oLeft=curtext.substring(0,startpos)+"-";oRight=curtext.substring(startpos+2,oLength);cursorpos=1;cursorpos1=2;}
     else if(startpos==10)
        {oLeft=curtext.substring(0,startpos)+" ";oRight=curtext.substring(startpos+2,oLength);cursorpos=1;cursorpos1=2;}
     else if(startpos==13||startpos==16)
       {oLeft=curtext.substring(0,startpos)+":";oRight=curtext.substring(startpos+2,oLength);cursorpos=1;cursorpos1=2;}
     else if(startpos>0&&startpos<19)
       {oLeft=curtext.substring(0,startpos);oRight=curtext.substring(startpos+1,oLength);cursorpos=0;cursorpos1=1;}
        oInput.value = oLeft+oRight;
       range.moveStart("character",startpos+cursorpos);
       range.moveEnd("character",startpos+cursorpos1);
       range.collapse(true); 
       range.select();       
  }
else if(event.keyCode==8)//後退按鍵時,當前一個字元為"-"或" "或":"時不變,否則替換為"0"
  {
     if(startpos==0)
        {oLeft="";oRight=curtext.substring(startpos,oLength);}
      else if(startpos==14||startpos==17)
        {oLeft=curtext.substring(0,startpos);oRight=":"+curtext.substring(startpos,oLength);}
      else if(startpos==11)
        {oLeft=curtext.substring(0,startpos);oRight=" "+curtext.substring(startpos,oLength);}
      else if(startpos==5||startpos==8)
        {oLeft=curtext.substring(0,startpos);oRight="-"+curtext.substring(startpos,oLength);}
      else if(startpos==1||startpos==2||startpos==3||startpos==4||startpos==6||startpos==7||startpos==9||startpos==10||startpos==12||startpos==13||startpos==15||startpos==16||startpos==18)
        {oLeft=curtext.substring(0,startpos);oRight="0"+curtext.substring(startpos,oLength);}
      else
        {oLeft=curtext.substring(0,startpos);oRight=curtext.substring(startpos-1,oLength);}
     oInput.value = oLeft+oRight;
     range.moveStart("character",startpos); 
     range.collapse(true); 
     range.select(); 
   }
else if(event.keyCode==46)//delete按鍵,當後一個字元為"-"或" "或":"時不變,否則替換為"0"
  {
      if(startpos==0)
        {oLeft="0";oRight=curtext.substring(startpos,oLength);}
      else if(startpos==13||startpos==16)
        {oLeft=curtext.substring(0,startpos)+":";oRight=curtext.substring(startpos,oLength);}
      else if(startpos==10)
        {oLeft=curtext.substring(0,startpos)+" ";oRight=curtext.substring(startpos,oLength);}
      else if(startpos==4||startpos==7)
        {oLeft=curtext.substring(0,startpos)+"-";oRight=curtext.substring(startpos,oLength);}
      else if(startpos==1||startpos==2||startpos==3||startpos==5||startpos==6||startpos==8||startpos==9||startpos==11||startpos==12||startpos==14||startpos==15||startpos==17||startpos==18)
        {oLeft=curtext.substring(0,startpos)+"0";oRight=curtext.substring(startpos,oLength);}
      else
        {oLeft=curtext.substring(0,startpos+1);oRight=curtext.substring(startpos,oLength);} 
    oInput.value = oLeft+oRight;
    range.moveStart("character",startpos+1); 
    range.collapse(true); 
    range.select(); 
   }
else if(event.keyCode==38)//向上鍵
   {
    range.moveStart("character",startpos-1); 
    range.collapse(true); 
    range.select();
   }
else if(event.keyCode==40)//向下鍵
   {
    range.moveStart("character",startpos+1); 
    range.collapse(true); 
    range.select();
    }
else //其他按鍵不做反應
  {
    oLeft=curtext.substring(0,startpos);
    oRight=curtext.substring(startpos,oLength);
    oInput.value = oLeft+oRight;
    range.moveStart("character",startpos); 
    range.collapse(true); 
    range.select(); 
  }
}
function changedatetime(objectname)//將日期格式規範化成 yyyy-mm-dd hh-mm-ss
{
  var textbuff;
  var year,month,day,minute,hour,second;
  var curtext=document.all(objectname).value;
  year=curtext.substring(0,curtext.indexOf("-"));
  curtext=curtext.substring(curtext.indexOf("-")+1,curtext.length)
  month=curtext.substring(0,curtext.indexOf("-"));
  if(month.length<2){month="0"+month;}
  curtext=curtext.substring(curtext.indexOf("-")+1,curtext.length)
  day=curtext.substring(0,curtext.indexOf(" "));
  if(day.length<2){day="0"+day;}
  curtext=curtext.substring(curtext.indexOf(" ")+1,curtext.length)
  hour=curtext.substring(0,curtext.indexOf(":"));
  if(hour.length<2){hour="0"+hour;}
  curtext=curtext.substring(curtext.indexOf(":")+1,curtext.length)
  minute=curtext.substring(0,curtext.indexOf(":"));
  if(minute.length<2){minute="0"+minute;}
  curtext=curtext.substring(curtext.indexOf(":")+1,curtext.length)
  second=curtext.substring(0,curtext.length);
   if(second.length<2){second="0"+second;}
   return ( year+"-"+month+"-"+day+" "+minute+":"+hour+":"+second)
}
function isDate(checktext)//日期時間檢查

  var   datetime; 
  var   year,month,day,hour,munite,second; 
  var   gone,gtwo,gthree,gfour,gfive; 
     datetime=document.all(checktext).value;
      year=datetime.substring(0,4); 
      gone=datetime.substring(4,5); 
      month=datetime.substring(5,7); 
      gtwo=datetime.substring(7,8); 
      day=datetime.substring(8,10);
      gthree=datetime.substring(10,11);
      hour=datetime.substring(11,13);
      gfour=datetime.substring(13,14);
      munite=datetime.substring(14,16);
      gfive=datetime.substring(16,17);
      second=datetime.substring(17,19);
      if((gone=="-")&&(gtwo=="-")&&(gthree==" ")&&(gfour==":")&&(gfive==":"))
        { 
          if(month<1||month>12){alert("月份必須在01和12之間!");return false;}   
          if(day<1||day>31){alert("日期必須在01和31之間!");return false;}
          else{ 
                 if(month==2)
                  {     
                   if((year%4)==0&&day>29){alert("二月份日期必須在01到29之間!");return false;}               
                   if((year%4)>0&&day>28){alert("二月份日期必須在01到28之間!");return false;}   
                  }   
                 if((month==4||month==6||month==9||month==11)&&(day>30)){alert(" 在四,六,九,十一月份   /n日期必須在01到30之間!");return   false;}   
               }
          if(hour>23){alert("小時必須在00和24之間!");return false;}
          if(munite>59){alert("分鐘必須在00和60之間!");return false;}
          if(second>59){alert("秒必須在00和60之間!");return false;}
         }
      else
        { 
           alert("請輸入日期!格式為(yyyy-mm-dd hh-mm-ss)   /n例(2001-01-01 01:00:00)");
           return   false; 
         } 
return true;  
}  

相關推薦

javascript實現input日期時間格式化輸入

在頁面程式碼中使用 ... <script language="javascript" src="../public/datetime.js"></script> <script language="javascript" type="text/

JavaScript實現自定義日期時間

dig doctype 數組存儲 timeout 格式 content charset idt digi <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

inputJavaScript實現回車響應事件,相容各瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

format date 日期 時間 格式化

his lac eth minute hour minutes exp reg turn export default function format (fmt) { var o = { ‘M+‘: this.getMonth() + 1, // 月份

js日期/時間格式化方法

cnblogs key lac 毫秒 logs 轉化 parseint urn word 一、javascript Date format(日期格式化) 方法一: // 對Date的擴展,將 Date 轉化為指定格式的String // 月(M)、日(d)、小時(h)、分

javascript實現簡單的戶登錄驗證

-c turn get https 沒有 驗證 utf-8 .com head 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

js -- 日期時間格式化

ets 結果 nds 格式化字符串 日期 span 時間格式化 ram back /** * js日期時間格式化 * @param date 時間讀對象 * @param format 格式化字符串 例如:yyyy年MM月dd日 hh時mm分ss秒 * @re

javascript實現base64編碼器

應用 ges 標準 asd 富文本 隨著 不同 none fail 前面的話   base-64作為常見的編碼函數,在基本認證、摘要認證以及一些HTTP擴展中得到了大量應用。在前端領域,也常常把圖片轉換為base-64編碼在網絡中傳輸。本文將詳細介紹base64的原理及用j

JS實現實時顯示系統時間

class mon 星期 itl utf sso inner watermark cti 下面為大家附上代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

怎麽JavaScript實現tab切換

代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果: 用JavaScript實現思路很簡單,就是先把所有的內容隱藏,點擊標題對應的內容顯示, css代碼如下: <style type="text/css"

js 實現獲取當前日期/時間/星期

獲取 asc tex get case new ctype cas 星期四 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>date&l

javascript實現拖拽帶來的種種問題(1)

round head 出發 mark mov 點擊事件 pan func 屬性 第一篇,先水一下,用javascript實現簡單的拖拽。主要還是想通過demo的形式總結一下各種event對象屬性。 首先先看一下,這個demo最終實現的效果: 主要涉及的屬性有: Mouse

javascript實現的購物車實例

close meta parseint ces post count ret selected html 基於javascript實現的購物車實例: 首先是效果和功能,如下圖所示,具有購物車的基本功能。 包括1、選中和全選商品;2、商品數量的增減;3、單個商品價格的計算;4

JavaScript實現CheckBox的全選取消反選,及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

Javascript實現棧結構

github主頁:https://github.com/A15162252289 什麼是棧? 棧是一種遵從後進先出(LIFO)原則的有序集合。新新增的或待刪除的元素都儲存在棧的同一端,稱之為棧頂,另一端則為棧底。在棧裡,新元素靠近棧頂,舊元素靠近棧底。 如何實現棧? 1.首

Javascript實現連結串列

github主頁:https://github.com/A15162252289 什麼是連結串列 連結串列儲存有序的元素集合,但不同於陣列,連結串列中的元素在記憶體中不是連續放置的。每個元素由一個儲存元素本身的節點和指向下一個元素的引用組成。 下圖為單向連結串列的示意圖 相對於傳統

JavaScript 實現留言

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言板</title> <style t

Javascript實現國際象棋棋盤的佈局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

Python日期時間格式化

from datetime import datetime update_stan = '18-11-07 10:10:10' type(update_stan ) # output: <type 'str'> # 字串轉為日期時間格式 update_str = da

JavaScript 實現簡單拼圖遊戲

本篇主要講解,如何利用原生的 JavaScript 來實現一個簡單的拼圖小遊戲。 線上體驗地址:拼圖 一、遊戲的基礎邏輯 想用一門語言來開發遊戲,必須先了解如何使用這門語言來實現一些基礎邏輯,比如影象的繪製、互動的處理、定時器等。 1、圖形繪製 圖形繪製是一切的基礎,這裡使用 Ja