HTML로 만 텍스트를 클릭하여 Datepicker 팝업을 열려고합니다. CSS

HTML5 Datepicker를 사용하고 있습니다. 아이콘이나 텍스트를 클릭 한 후이 datepicker를 열려고합니다.HTML로 만 텍스트를 클릭하여 Datepicker 팝업을 열려고합니다. CSS

CODE :

<label for="YOURID">Through<label> 
<input id="YOURID" type="date" />

나는 라벨을 사용하여 시도했지만 작동하지 않습니다. HTML, CSS 및 자바 스크립트 (JQUERY가 아님) 만 사용하고 싶습니다.

하지만 레이블이 있어야합니다. 그래서 나의 최우선 순위는 html css로 (클릭 가능한 텍스트 만들기 및 datepicker 열기)를 구현하고 싶다. Datepicker를 열려면 텍스트를 클릭해야합니다. 당신이 입력 상자가 다음 만 표시 달력 아이콘이 HTML에서

pikaday

을 표시하는 방법으로 10px하는 폭을하지 않으려면

출처

2017-11-21 V SH

작업 코드를 제공 할 수 있습니까? –

당신은 HTML과 CSS만으로는 그걸 성취 할 수 없습니다. js를 사용해야합니다. 바닐라 JS도 마찬가지입니다. –

datepicker는 브라우저마다 다릅니다. 나는 이것이 할 수 있다고 생각하지 않는다. – Huelfe

그냥 자신의 JS를 추가,이 시도

당신의 JS에서

<input type="text" id="datepicker">

는

var picker = new Pikaday({ field: document.getElementById('datepicker') });

출처

2017-11-21 10:06:14

이 스크립트는 html5 datepicker를 사용하지 않습니다. – Huelfe

네, HTML5를 사용하고 싶다면 JSfiddle에서 Sid 응답을 시도해 보았습니다! –

Sid의 대답은 크롬에서 작동하지 않습니다. – Huelfe

정확히 뭐 점점되지 않음 당신이 원하지만 내가 생각하기에 이것은 당신이 찾고있는 것이라고 생각합니다

이것을 시도하십시오!

HTML  
    <label for="YOURID">Date Of Birth</label> 
    <input type="date" name="dateofbirth" id="YOURID"> 

    CSS 
    [type="date"] { 
    background:#fff 
    url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat ; 
    } 
    [type="date"]::-webkit-inner-spin-button { 
    display: none; 
    } 
[type="date"]::-webkit-calendar-picker-indicator { 
opacity: 0; 
    } 


body { 
padding: 4em; 
background: #e5e5e5; 
font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans 
Unicode', Verdana, sans-serif; 
    } 
label { 
display: block; 
     } 
input { 
border: 1px solid #c4c4c4; 
border-radius: 5px; 
background-color: #fff; 
padding: 3px 5px; 
box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); 
width: 190px; 
     }

희망이 있습니다.

출처

2017-11-21 10:06:25 Sid

크롬에서는 작동하지 않습니다. – Huelfe

@ 시드 텍스트를 클릭 한 후 datepicker의 팝업을 열려고합니다. –

늦게 답장을 드려서 죄송합니다. 크롬에서도 저에게 잘 돌아가고 있습니다. 최신 크롬이 설치되어 있는지 확인하십시오. – Sid

아래의 HTML 및 Javascript 날짜 선택 도구 예제는 거의 모든 브라우저에서 작동합니다. 네이티브 html datetime-local 입력 유형을 사용하며 datetime-local이 브라우저에서 지원되지 않는 경우 polyfin로 Pikaday (시간에 따라)로 폴백합니다. 그것을 실행하려면 https://github.com/owenmead/Pikaday에서 Pikaday를 다운로드하고 pikaday.js와 pikaday.css 을 추출하여이 코드가 들어있는 파일과 같은 폴더에 놓아야합니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="pikaday.css"/> 
    <script src="pikaday.js"></script> 
    <script type="text/javascript"> 

function setDate(elementId, date) { 
    // "elementId" is the element id of the date field to be updated and will be initialized to "date" 
    // in the timezone the user is browsing from. 

    if (elementId.type == "datetime-local") { 
    // datetime-local is supported, set the initial date in ISO format and show it 
    elementId.value = date.getFullYear() + '-'+ 
    ('0'+(date.getMonth()+1)).slice(-2) + '-' + 
    ('0'+date.getDate()).slice(-2) + 'T' + 
    ('0'+date.getHours()).slice(-2) + ':' + 
    ('0'+date.getMinutes()).slice(-2); 
    } 
    else { 
    // Note that even though we assign the datetime-local input type to time fields it will be read back as text unless 
    // datetime-local is actually supported. 
    new Pikaday({ 
     field   : elementId, 
     defaultDate : date, 
     setDefaultDate : true, 
     showTime  : true, 
     minutesStep : 5, 
     splitTimeView : false, 
     hours24format : true, 
     position  : 'bottom left' 
    }); 
    } 
} 


function getDateAsString(elementId) { 
    var dateAsString; 

    if (elementId.type == "datetime-local") { 
    dateAsString = elementId.value; 
    } 
    else { 
    var val = elementId.value; 
    // Convert time to ISO format which is the same format as that returned by datetime-local 

    var month = val.substring(4,7); 
    if (month == "Jan") month = "01"; 
    else if (month == "Feb") month = "02"; 
    else if (month == "Mar") month = "03"; 
    else if (month == "Apr") month = "04"; 
    else if (month == "May") month = "05"; 
    else if (month == "Jun") month = "06"; 
    else if (month == "Jul") month = "07"; 
    else if (month == "Aug") month = "08"; 
    else if (month == "Sep") month = "09"; 
    else if (month == "Oct") month = "10"; 
    else if (month == "Nov") month = "11"; 
    else if (month == "Dec") month = "12"; 

    var hour = val.substring(16,18); 
    if (val.indexOf("PM") != -1) { 
     hour = parseInt(hour); 
     if (hour < 12) { 
     // Have seen the likes of 21:15 PM returned by pikaday on firefox, hence the hour check 
     hour = hour+12;    
     } 
    } 
    dateAsString = val.substring(11,15) + "-" + month + "-" + val.substring(8,10) + "T" + hour + ":" + val.substring(19,21);  
    } 

    return dateAsString; 
} 


function getDate(elementId) { 
    var ds = getDateAsString(elementId); 
    var date = new Date(ds.substring(0,4), ds.substring(5,7)-1, ds.substring(8,10), ds.substring(11,13), ds.substring(14,16), ds.substring(17,19)); 
    return date; 
} 
    </script> 
    </head> 

    <body onload="setDate(document.getElementById('demo'), new Date());"> 
    <input type="datetime-local" id="demo"/> 
    <br/><br/> 
    <button type="button" onclick="alert(getDateAsString(document.getElementById('demo')))">Show date as string</button> 
    <br/><br/> 
    <button type="button" onclick="alert(getDate(document.getElementById('demo')))">Show date as date object</button> 
    </body> 

</html>

출처

2017-12-01 16:02:15 paulh

HTML로 만 텍스트를 클릭하여 Datepicker 팝업을 열려고합니다. CSS

답변

관련 문제