[V2] Picker Date how to show month name?


#1

Hello community.
I’m using Picker component to select date. When page loads the input shows “3 7, 2018” and when I click on it shows “3 August, 2018”. What I’m trying to do is to show the actual date with month name before clicking it. Can’t figure it out how. Tried to use displayValue variable and couldn’t make it work…

My page html code:

<div class="page page-with-subnavbar" data-name="turnos">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Atrás</span>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Turnos</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-turnos">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      
      <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init searchbar-turnos"
      data-search-container=".virtual-list-turnos" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar turnos"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>

      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" id="button-turno" class="button">
              <i class="far fa-calendar-plus font-awesome-size"></i></a>
            <a href="#" id="button-sobreturno"  class="button">
              <i class="far fa-calendar-alt font-awesome-size"></i></a>
            <a href="#" id="button-turnoslibres" class="button">
              <i class="far fa-calendar-check font-awesome-size"></i></a>
            <a href="#" id="button-anular" class="button">
              <i class="far fa-calendar-times font-awesome-size"></i></a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>

    <!-- Fecha Picker -->
    <div class="block-title">Fecha</div>
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Seleccionar Fecha" readonly="readonly" id="demo-picker-date"/>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- Fecha Picker FIN -->

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>
    
    <!--Virtual List Turnos -->
    <div class="list virtual-list virtual-list-turnos media-list accordion-list searchbar-found">
    </div>
    <!--Virtual List Turnos -->

  </div>

</div>

JS code:

function obtenerFechaTurno() {

  var today = new Date();

  console.log("today: " + today);

  var pickerCustomToolbar = app.picker.create({
    inputEl: '#demo-picker-date',
    rotateEffect: false,
    value: [
      today.getDate(),
      today.getMonth(),
      today.getFullYear()
    ],
    renderToolbar: function () {
      return '<div class="toolbar">' +
        '<div class="toolbar-inner">' +
          '<div class="left">' +
          '</div>' +
          '<div class="right">' +
            '<a href="#" class="link sheet-close popover-close">Aceptar</a>' +
          '</div>' +
        '</div>' +
      '</div>';
    },
    formatValue: function (values, displayValues) {
      return values[0] + ' ' + displayValues[1] + ', ' + values[2];
    },
    cols: [
      // Days
      {
        values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      },
      // Months
      {
        values: ('0 1 2 3 4 5 6 7 8 9 10 11').split(' '),
        displayValues: ('Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre').split(' '),
        textAlign: 'left'
      },
      // Years
      {
        values: (function () {
          var arr = [];
          for (var i = 2018; i <= 2030; i++) { arr.push(i); }
            return arr;
        })(),
      }
    ],
    on: {
      change: function (picker, values, displayValues) {
        var daysInMonth = new Date(picker.value[2], picker.value[1]*1 + 1, 0).getDate();
        if (values[0] > daysInMonth) {
          picker.cols[0].setValue(daysInMonth);
        }
      },
    }
  });

}

#2

Replace this:

to this:

values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],

#3

Worked great, thanks a lot!.