Home > Developer > Web Develop
JavaScript date and Time component _laydate.js
Date Calendar effect:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Gary_ Calendar Date</title><Linkrel= "stylesheet"href= "Css/laydate.css" /><Scriptsrc= "Js/jquery.min.js"></Script><Scriptsrc= "Js/laydate.js"></Script><styletype= "Text/css">. Select-date{font-family:"STA Cartman"}</style></Head><Body><Scriptsrc= "/demos/googlegg.js"></Script><Divclass= "Laydate-box"> <inputtype= "text"ID= "Laydateinput"placeholder= "xxxx year XX month xx day" /> <!--Add picture can be written here img ... - <Divclass= "Select-date"> <Divclass= "Select-date-header"> <ulclass= "Heade-ul"> <Liclass= "Header-item header-item-one"> <Selectname=""ID= "Yearlist"></Select> </Li> <Liclass= "Header-item header-item-two"onselectstart= "return false"> <Selectname=""ID= "Monthlist"></Select> </Li> <binclass= "Header-item header-item-three"onselectstart= "return false" > <spanclass= "Reback">Back to today</span> </Li> </ul> </Div> <Divclass= "Select-date-body"> <ulclass= "Week-list"> <Li>Day</Li><Li>One</Li><Li>Two</Li><Li>Three</Li><Li>Four</Li><Li>Five</Li><Li>Six</Li> </ul> <ulclass= "Day-tabel"></ul> </Div> </Div></Div><Script> functiongetselectdate (Result) {//Get the selected date hereConsole.log (Result); }</Script><Divstyle= "text-align:center;margin:50px 0; font:normal 14px/24px ' MicroSoft yahei ';"></Div></Body></HTML>index.html
*{margin:0; padding:0;} li{List-style:none;}. icon{Position:absolute; top:5px; right:5px; height:25px; width:25px; Background: #fff;}. laydate-box{height:34px; width:154px; Border:none; margin:100px 0 0 200px; Position:relative;} #laydateInput {outline:none; Display:block; height:30px; width:150px; font-size:16px; line-height:30px; }.select-date{Position:absolute; left:0px; top:35px; width:266px; height:301px; border:1px solid #58abff; Display:none;}. select-date-header{height:48px; border-bottom:1px solid #58abff;}. heade-ul{height:49px;}. header-item{height:28px; Float:left; margin-top:9px;}. Header-item select{height:28px;}. Header-item-one select{width:68px; margin-left:10px; height:30px; Outline:none;}. header-item-one{height:30px;}. Header-item-two i{Display:block; Float:left; height:28px; width:28px;line-height:28px; Text-align:center; Cursor:pointer;}. Header-item-two i{Display:block; Float:left; height:28px; width:28px; line-height:28px; Text-align:center; Cursor:pointer;}. header-item-two{border:1px solid #ccc; margin-left:10px;}. Header-item-two select{Float:left; Border:none; Outline:none;}. Header-item-two I:nth-child (1) {border-right:1px solid #ccc;}. Header-item-two I:nth-child (3) {border-left:1px solid #ccc;}. header-item-three{margin-left:30px; width:73px;}. Header-item-three span{Display:block; height:100%; border:1px solid #d8d8d8; Background: #f9f9f9; line-height:28px; Text-align:center; font-size:14px; width:100%; Cursor:pointer;}. Header-item-three span:hover{border-color: #388bff;}. Header-item-three span.active{border-color: #388bff;}. week-list{height:35px; width:100%; border-bottom:1px solid #c8cacc;}. Week-list li{Float:left; Height: 35px; width:35px; Text-align:center; line-height:35px; font-size:15px; margin:0 1px; /*font-weight:bold;*/}.week-list Li:nth-child (7) {color: #e02d2d}.week-list li:nth-child (1) {color: #e02d2d}.tabe l-line{height:35px; border-bottom:1px solid #c8cacc;}. tabel-ul{height:35px;}. tabel-li{height:31px; width:31px; Text-align:center; line-height:31px; Float:left; border:2px solid #fff; margin:0 1px;}. tabel-li.predays{color: #bfbfbf;}. tabel-li.nextday{color: #bfbfbf;}. tabel-li:hover{border-color: #ffbb00;}. tabel-li.showclick{border-color: #ffbb00;}. tabel-li.active{background: #ffbb00; Color: #fff!important; Border-color: #ffbb00;}. tabel-li.weekcolor{color: #e02d2d;}Laydate.css
Source Code: Portal
JS Date and Time component/Plugin official demo and explanation: Portal
Reference Document: Portal
Implementation process
First, set the date calendar location
. laydate-box{ height:34px; width:154px; Border:none; margin:100px 0 0 200px; Position:relative;}Position Properties:
Second, date calendar
. select-date{ Position:absolute; left:0px; top:35px; width:266px; height:301px; border:1px solid #58abff; Display:none;}border Set the style of 4 borders :
The Display property specifies the type of box that the element should generate
. select-date-header{ height:48px; border-bottom:1px solid #58abff;}The Border-bottom shorthand property sets all properties of the bottom border to a declaration
The selector laydate.render ({ elem: ' #test2 ' , type: ' Year '}),//month selector Laydate.render ({ elem: ' #test3 ' , Type: ' Month '});//Time selector Laydate.render ({ elem: ' #test4 ' , type: ' Time '}),///Temporal selector Laydate.render ({ elem: ' #test5 ' , type: ' DateTime '});Date range Laydate.render ({ elem: ' #test6 ' , range:true});//year range Laydate.render ({ elem: ' #test7 ' , Type: ' Year ' , range:true});//month range Laydate.render ({ elem: ' #test8 ' , type: ' Month ' , range:true}) ;//Time range Laydate.render ({ elem: ' #test9 ' , type: ' time ', range:true});//DateTime range Laydate.render ({ Elem: ' #test10 ' , type: ' DateTime ' //Limit optional date var ins22 = Laydate.render ({ elem: ' #test-limit1 ' , min: ' 2016-10-14 ' , max: ' 2080-10-14 ' , Ready:function () { <br> 2016-10-14 to 2080-10-14 '); }); /several days to choose, here take 7 days for example Laydate.render ({ elem: ' #test-limit2 ' , min:-7 , max:7});//Limit optional time Laydate.render ({ elem: ' #test-limit3 ' , type: ' Time ' , min: ' 09:30:00 ' , max: ' 17:30:00 ' Custom Format laydate.render ({ elem: ' #test11 ' , Format: ' yyyy mm month dd Day '}) Laydate.render ({ elem: ' #test12 ' , Format: ' dd/mm/yyyy '}); Laydate.render ({ elem: ' #test13 ' , Format: ' Yyyymm '}) Laydate.render ({ elem: ' #test14 ' , type: ' Time ' , Format: ' H dot m '}); Laydate.render ({ elem: ' #test15 ' , type: ' Month ' , range: ' → ' , format: ' Yyyy-mm '}); Laydate.render ({ elem: ' #test16 ' , type: ' DateTime ' , Range: ' To ' , format: ' yyyy m D (M min s second '}); Dark Green Theme Laydate.render ({ elem: ' #test29 ' , Theme: ' Molv '});//Custom color Laydate.render ({ elem: ' #test30 ' , Theme: ' #393D49 '}); /Lattice Theme Laydate.render ({ elem: ' #test31 ' , Theme: ' Grid '}); Thanks laydate date and time component: Portal
JS Frame _ (Laydate.js) Simple implementation Date Calendar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
