LegnoDatePicker

Example 1 - Default

Dato

<legno-date-picker label="Dato"/>

INFO

• This component uses an external library - Pikaday.
• When using plain HTML you need to:
  • inlude the required script and style. Read the documentation for manual implemntation here (opens new window).
  • toggle these css classes manually on the root element:
    • legno-date-picker--has-value adds floating label support
    • legno-date-picker--invalid shows invalid state

Example implementation below is for test purposes and should not be used in production. Read the documentation here (opens new window).

 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<script src="pikaday.js"></script>

<div class="legno-date-picker">
  <input type="text" id="datepicker" readonly="readonly">
  <label>Dato</label>
</div>

<script>
  var picker = new Pikaday({ 
    field: document.getElementById('datepicker'),
      format     : 'DD.MM.YYYY',
      firstDay   : 1,               
      i18n       : {
          previousMonth : 'Forrige måned',
          nextMonth     : 'Neste måned',
          months        : ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],
          weekdays      : ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','lørdag'],
          weekdaysShort : ['Søn','Man','Tir','Ons','Tor','Fre','Lør']
      }
});
</script>

Example 2 - Validation error

Dato

This is an error message

<legno-date-picker label="Dato" error-message="This is an error message"/>

INFO

• This component uses an external library - Pikaday.
• When using plain HTML you need to:
  • inlude the required script and style. Read the documentation for manual implemntation here (opens new window).
  • toggle these css classes manually on the root element:
    • legno-date-picker--has-value adds floating label support
    • legno-date-picker--invalid shows invalid state

Example implementation below is for test purposes and should not be used in production. Read the documentation here (opens new window).

 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<script src="pikaday.js"></script>

<div class="legno-date-picker legno-date-picker--invalid">
  <input type="text" id="datepicker" readonly="readonly">
  <label>Dato</label>
  <div class="legno-date-picker__error-message">
      This is an error message
  </div>
</div>

<script>
    var picker = new Pikaday({ 
      field: document.getElementById('datepicker'),
        format     : 'DD.MM.YYYY',
        firstDay   : 1,               
        i18n       : {
            previousMonth : 'Forrige måned',
            nextMonth     : 'Neste måned',
            months        : ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],
            weekdays      : ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','lørdag'],
            weekdaysShort : ['Søn','Man','Tir','Ons','Tor','Fre','Lør']
        }
  });
</script>

Slots

...

Props

...