js源码--日期(2)

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< META NAME = " Generator "  CONTENT = " EditPlus " >
< META NAME = " Author "  CONTENT = "" >
< META NAME = " Keywords "  CONTENT = "" >
< META NAME = " Description "  CONTENT = "" >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
</ HEAD >
< BODY >
< form name = " form1 "  method = " post "  action = "" >
日期:
< input type = " text "  id = " a "  onclick = " restrictInputValue(this) "  onkeydown = " ddd(this) "   >
天数:
< input type = " text "  id = " b "   >
日期相加:
< input type = " text "  id = " c "   >
< input type = " button "   value = " 判断是否合法 "  onClick = " aaa(document.getElementById('a')) " >
< input type = " button "   value = " 获得日期 "  onClick = " bbb(document.getElementById('a')) " >
< input type = " button "   value = " 日期相加 "  onClick = " ccc(document.getElementById('a'),document.getElementById('b')) " >
</ form >
</ BODY >
</ HTML >

< script language = " javascript " >

window.onload
= init;
function  init() {
var oDate = new Date();
var result= oDate.getFullYear()+"-"+(oDate.getMonth()<10?("0" + (oDate.getMonth()+1)):(oDate.getMonth()+1))+"-"+(oDate.getDate()<10?("0" + oDate.getDate()) : oDate.getDate());
document.getElementById(
"a").value=result;
}


String.prototype.isDate 
=   function ()
{
var r = this.match(/^(d{4})(-|/)(d{1,2})2(d{1,2})$/);
if(r==null)return false;
var d = new Date(r[1], r[3]-1,r[4]);
if (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]){
return true;
}

}


function  aaa(obj) {
if(!obj.value.isDate()){
alert(
"error");
obj.focus();
}

}


function  bbb(obj) {
var r = obj.value.match(/^(d{4})(-|/)(d{1,2})2(d{1,2})$/);
if(r==null)return false;
var d = new Date(r[1], r[3]-1,r[4]);
var result=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()
document.getElementById(
"c").value=""
document.getElementById(
"c").value=result
}


function  ccc(obj1,obj2) {
var r = obj1.value.match(/^(d{4})(-|/)(d{1,2})2(d{1,2})$/);
if(r==null)return false;
var d = new Date(r[1], r[3]-1,r[4]);
var c=new Date(d.getTime()+obj2.value*1000*60*60*24)
var result=c.getFullYear()+"-"+((parseInt(c.getMonth())+1>9)?"":"0")+(parseInt(c.getMonth())+1)+"-"+(c.getDate()>9?"":"0")+c.getDate()
document.getElementById(
"c").value=""
document.getElementById(
"c").value=result
}



function  restrictInputValue(obj)
{
    
var range = obj.createTextRange();
    
var selRange = document.selection.createRange();
    range.moveStart(
"character",-obj.value.length)
    selRange.setEndPoint(
"StartToStart",range);
    
if(selRange.text.length<5){
    specialText_SelectYear(obj);
    }

    
else if(selRange.text.length>4&&selRange.text.length<8){
    specialText_SelectMonth(obj)
    }

    
else{
    specialText_SelectDate(obj)
    }

}


function  specialText_SelectYear(oInput)
{
        
var oRange = oInput.createTextRange();
        oRange.moveStart(
"character",0);
        oRange.moveEnd(
"character",-6);
        
//代表选中了年
        oInput.selectIndex = 1;
        oRange.select();
}

// 选中月份
function  specialText_SelectMonth(oInput)
{
        
var oRange = oInput.createTextRange();
        oRange.moveStart(
"character",5);
        oRange.moveEnd(
"character",-3);
        
//代表选中了月
        oInput.selectIndex = 2;
        oRange.select();
}

// 选中日期
function  specialText_SelectDate(oInput)
{
        
var oRange = oInput.createTextRange();
        oRange.moveStart(
"character",8);
        
//代表选中了日期
        oInput.selectIndex = 3;
        oRange.select();
}


function  ddd(oInput) {   
oEvent
=window.event   
 
if((oEvent.keyCode >= 48 && oEvent.keyCode <= 57||
    (oEvent.keyCode 
>= 96 && oEvent.keyCode <= 105)){
    
return;
}

oEvent.returnValue
=false;
}

</ script >
 
我写的这个就算比较简单的了,适合初学者对日期应用的认识较为合适。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要查看element-ui中el-date-picker的源码,你可以按照以下步骤进行操作: 1. 首先,你需要复制element-ui中date-picker组件的源码。可以在node_modules\element-ui\packages\date-picker目录中找到该源码文件。 2. 将复制的源码粘贴到你的项目中的合适位置,比如src\components\date-picker。 3. 在你的项目的main.js文件中使用import语句引入DatePicker组件,并将其注册为全局组件。示例代码如下: ``` import DatePicker from './components/date-picker'; Vue.component('DatePicker', DatePicker); ``` 4. 现在你就可以在你的项目中使用el-date-picker组件了。在你的Vue模板中,可以使用以下代码: ``` <DatePicker v-model="value" type="week" format="yyyy 第 WW 周" placeholder="选择周"></DatePicker> ``` 通过以上步骤,你可以将element-ui中的el-date-picker组件的源码复制到你的项目中,并使用它来实现你的需求。如果你想了解更多关于el-date-picker的源码细节,你可以查看src\components\date-picker\src\picker\date-picker.js文件,这个文件中包含了el-date-picker的不同模式的实现逻辑。另外,你也可以修改src\components\date-picker\src\panel\week-range.vue文件来改造el-date-picker实现新的模式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [手撸Element源码,完善日期选择器功能,范围选择器周、季、年](https://blog.csdn.net/qq_45485759/article/details/130970367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值