Question

我正在使用HTML5 Datepicker。我想点击图标或文字后打开这个日期选择器。

CODE：

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

我尝试使用标签，但无法使用。我只想使用HTML，CSS和javascript（NOT JQUERY）。

但它应该与标签一起使用。所以我的首要任务是，我想用html css实现（make clickable text和open datepicker）。 Datepicker打开应该在点击文本后。

Answer 1

试试这个，只需添加他们的JS如果你不想显示输入框，那么以只显示日历图标的方式将其宽度设为10px

pikaday

在您的HTML中

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

在你的JS中

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

Answer 2

没有得到你想要的，但我认为这就是你要找的东西

试试这个！

  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;
      }

希望这有帮助！

Answer 3

以下HTML和Javascript日期选择器示例适用于几乎所有浏览器。它使用本机html datetime-local 输入类型，并在浏览器不支持datetime-local时作为polyfill回退到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>

我想通过仅使用HTML CSS单击文本来打开Datepicker弹出窗口

3 个答案: