¿Cómo agregar amp-date-picker a mi sitio web? Instrucciones

amp-date-picker, es un selector de fecha interactivo al estilo calendario para la entrada de formularios. Con este componente, los usuarios pueden especificar fechas únicas o rangos de fechas con una interfaz de calendario que hace que el proceso sea más rápido y menos propenso a errores.

Inserte los siguientes script

Agregue el componente amp-date-picker


<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>


Inserte el componente amp-bind para establecer las variables en función de la fecha seleccionada.


<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>


Incluya el componente amp-mustache para mostrar un panel de información debajo del selector de fecha.


<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>


Agregar el componente amp-lightbox para mostrar un selector de fecha dentro de una vista de caja de luz a pantalla completa.


<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>


Insertar el componente amp-form para crear formularios.


<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>


Para personalizar el amp-date-pickerestilo, puede usar clases tales como las CalendarMonth_caption que se heredan de las fechas de reacción. amp-date-picker también expone las clases de CSS que puede usar en la regla de CSS, como amp-date-picker-selecting, que se aplica a la entrada de fecha que el usuario está editando.

Estilos CSS


<style amp-custom>
.CalendarMonth_caption {
  color: #fff;
}
[type="range"] .amp-date-picker-selecting {
  border-bottom-color: #b60845;
  color: #b60845;
}
.align-content-center,
.align-content-center .amp-date-picker-calendar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.space-between > * + * {
  margin-left: 1em;
}
amp-lightbox {
  background: rgba(0, 0, 0, .75);
}
amp-lightbox .align-content-center {
  height: 100%;
}
.example-picker {
  display: flex;
}
.example-picker[mode="overlay"] {
  padding: 1em;
}
.small-button {
  font-size: .75em;
  line-height: .75em;
  margin: .75em;
}
.icon-input {
  background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1393.1 1500" style="enable-background:new 0 0 1393.1 1500;" xml:space="preserve"><path d="M107.2,1392.9h241.1v-241.1H107.2V1392.9z M401.9,1392.9h267.9v-241.1H401.9V1392.9z M107.2,1098.2h241.1V830.4H107.2 V1098.2z M401.9,1098.2h267.9V830.4H401.9V1098.2z M107.2,776.8h241.1V535.7H107.2V776.8z M723.4,1392.9h267.9v-241.1H723.4V1392.9z M401.9,776.8h267.9V535.7H401.9V776.8z M1044.8,1392.9H1286v-241.1h-241.1V1392.9z M723.4,1098.2h267.9V830.4H723.4V1098.2z M428.7,375V133.9c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375 c0,7.3,2.7,13.5,8,18.8c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C426,388.5,428.7,382.3,428.7,375z M1044.8,1098.2H1286 V830.4h-241.1V1098.2z M723.4,776.8h267.9V535.7H723.4V776.8z M1044.8,776.8H1286V535.7h-241.1V776.8z M1071.6,375V133.9 c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375c0,7.3,2.7,13.5,8,18.8 c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C1069,388.5,1071.6,382.3,1071.6,375z M1393.1,321.4v1071.4 c0,29-10.6,54.1-31.8,75.3c-21.2,21.2-46.3,31.8-75.3,31.8H107.2c-29,0-54.1-10.6-75.3-31.8C10.6,1447,0,1421.9,0,1392.9V321.4 c0-29,10.6-54.1,31.8-75.3s46.3-31.8,75.3-31.8h107.2v-80.4c0-36.8,13.1-68.4,39.3-94.6S311.4,0,348.3,0h53.6 c36.8,0,68.4,13.1,94.6,39.3c26.2,26.2,39.3,57.8,39.3,94.6v80.4h321.5v-80.4c0-36.8,13.1-68.4,39.3-94.6 C922.9,13.1,954.4,0,991.3,0h53.6c36.8,0,68.4,13.1,94.6,39.3s39.3,57.8,39.3,94.6v80.4H1286c29,0,54.1,10.6,75.3,31.8 C1382.5,267.3,1393.1,292.4,1393.1,321.4z"/></svg>');
  background-repeat: no-repeat;
  flex-shrink: 0;
  height: 28px;
  margin-top: 8px;
  width: 27px;
}
</style>


Selector de fecha único

amp-date-picker con type=single se puede usar para seleccionar una sola fecha. Puede usar amp-mustache con el atributo info-template para mostrar un panel de información debajo del calendario, aquí mostramos la fecha que acaba de seleccionar. info-template también habilita el enlace AMP haciendo disponibles las variables que se han establecido con AMP.setState. Se requiere un marcador de posición para el componente. Para una sola fecha, esto puede tomar la forma: <input amp-date-placeholder placeholder="Pick a date">. amp-date-picker introduce clear acción que se puede llamar después de hacer clic en un botón para borrar la selección de fecha; requiere el atributo show-clear-date.


Ejemplo

<amp-date-picker id="simple-date-picker"   type="single"   mode="overlay"   layout="container"   on="select:AMP.setState({date1: event.date, dateType1: event.id})"   format="YYYY-MM-DD"   open-after-select   input-selector="[name=date1]"   class="example-picker space-between">   <div class="icon-input"></div>   <div class="ampstart-input">     <input class="border-none p0"       name="date1"       placeholder="Pick a date">   </div>   <button class="ampstart-btn caps"     on="tap: simple-date-picker.clear">Clear</button>   <template type="amp-mustache"     info-template>     <span [text]="date1 != null ? 'You picked ' + date1 + '.' : 'You will see your chosen date here.'">You will see your chosen date here.</span>   </template> </amp-date-picker>

Además, también puede usar amp-mustache para crear plantillas para el marcado de fecha personalizado, como un icono en lugar del número del mes. Aquí estamos usando un ícono de taco en lugar del número del mes con una frecuencia de 2 semanas cada martes. Los casos de uso común pueden ser fechas del mes en que el precio de un artículo se fija en un número específico.


Ejemplo

<amp-date-picker id="simple-date-picker-2"   type="single"   mode="overlay"   layout="container"   on="select:AMP.setState({date2: event.date, dateType2: event.id})"   locale="en"   format="YYYY-MM-DD"   open-after-select   input-selector="[name=date2]"   class="example-picker space-between">   <div class="ampstart-input">     <input class="border-none p0"       name="date2"       placeholder="Pick a date">   </div>   <button class="ampstart-btn caps"     on="tap: simple-date-picker-2.clear">Clear</button>   <template type="amp-mustache"     date-template     dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU"     id="tacos2">     <span>🌮</span>     <span class="taco-tuesday"></span>   </template>   <template type="amp-mustache"     info-template>     <span [text]="date2 ? 'You picked ' + date2 + '.' +       (dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span>   </template> </amp-date-picker>

Selector de rango de fechas

amp-date-picker con type=rangese puede usar para seleccionar un rango de fechas. Por defecto, amp-date-picker deshabilita las fechas pasadas, use el atributo min para habilitarlas.


Ejemplo

<amp-date-picker type="range"   mode="overlay"   id="range-date-picker"   on="   select:     AMP.setState({         dates: event.dates,         startDate: event.start,         endDate: event.end     })"   format="YYYY-MM-DD"   open-after-select   min="2017-10-26"   start-input-selector="#range-start"   end-input-selector="#range-end"   class="example-picker space-between">   <div class="ampstart-input">     <input class="border-none p0"       id="range-start"       placeholder="Start date">   </div>   <div class="ampstart-input">     <input class="border-none p0"       id="range-end"       placeholder="End date">   </div>   <button class="ampstart-btn caps"     on="tap:range-date-picker.clear">Clear</button>   <template type="amp-mustache"     info-template>     <span [text]="(startDate && endDate ?       'You picked ' + startDate.date + ' as start date and ' + endDate.date + ' as end date.' :     'You will see your chosen dates here.')">       You will see your chosen dates here.     </span>   </template> </amp-date-picker>

Configuración Externa

Es posible configurar las preferencias amp-date-picker utilizando un json externo. Usamos el siguiente JSON en la URL /json/amp-date-picker.json:

 {
    "templates": [{
      "id": "spooky",
      "dates": [
        "FREQ=WEEKLY;DTSTART=20180101T160000Z;BYDAY=MO",
        "FREQ=YEARLY;DTSTART=20180101T160000Z;WKST=SU;BYMONTH=10;BYMONTHDAY=31",
        "FREQ=MONTHLY;DTSTART=20180101T160000Z;WKST=SU;BYDAY=FR;BYMONTHDAY=13"
      ]
    }]
  }


Para las fechas que coinciden con la lista de fechas en el blob JSON, la plantilla con id="spooky" se utilizará para representar ese día en el calendario. En este caso, estas fechas son los lunes, viernes 13 y Halloween.


Ejemplo

<amp-date-picker id="src-picker"   type="single"   mode="overlay"   layout="container"   format="YYYY-MM-DD"   src="https://ampbyexample.com/json/amp-date-picker.json"   input-selector="#src-input"   class="example-picker space-between">   <div class="ampstart-input">     <input class="border-none p0"       id="src-input"       placeholder="Pick a date">   </div>   <button class="ampstart-btn caps"     on="tap: src-picker.clear">Clear</button> <template type="amp-mustache"   date-template     id="spooky">     <span>🙀</span>   </template> </amp-date-picker>

Selector de fecha estático "Static date picker"

amp-date-picker con mode="static" puede mostrar una vista de calendario. El selector estático se puede usar con o sin una entrada adjunta.


Ejemplo

<div class="align-content-center">   <amp-date-picker id="static-picker"     type="single"     mode="static"     layout="fixed-height"     height="360"     format="YYYY-MM-DD"     input-selector="#static-picker-input">   </amp-date-picker> </div>

amp-date-picker admite una variedad de atributos, por ejemplo highlighted y blocked. Encuentra la lista completa en el documento oficial. El atributo blocked permite especificar una lista separada por espacios de fechas ISO 8601 y RRULE RFC 5545 que especifican fechas no permitidas. Los atributos highlighted son una lista separada por espacios de fechas de ISO 8601 y RRULE de RFC 5545 que especifican las fechas que se muestran con un estilo de resaltado. Aquí cada jueves es highlighted, mientras que cada fin de semana lo es blocked.


Ejemplo

<div class="align-content-center">   <amp-date-picker id="simple-date-picker-3"     type="single"     mode="static"     layout="fixed-height"     height="360"     on="select:AMP.setState({date3: event.date ? event.date : ''})"     locale="en"     format="YYYY-MM-DD"     highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"     blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">   </amp-date-picker> </div>

Si el selector de fecha utiliza type="range" y hay fechas bloqueadas que pueden formar parte del rango, el atributo allow-blocked-dates  permite a los usuarios seleccionar rangos que incluyen fechas bloqueadas.


Ejemplo

<div class="align-content-center">   <amp-date-picker id="simple-date-picker-4"     type="range"     mode="static"     layout="fixed-height"     height="360"     on="select:AMP.setState({date4: event.date ? event.date : ''})"     locale="en"     format="YYYY-MM-DD"     allow-blocked-ranges     highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"     blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">   </amp-date-picker> </div>

Lightbox date picker

amp-date-picker puede mostrar dentro de un lightbox modal. El evento activate abre el lightbox si el usuario enfoca los elementos de entrada conectados del selector y presiona la tecla de flecha hacia abajo. deactivatese activa cuando el usuario presiona escapar cuando interactúa con la vista del calendario. Para un cuadro de interfaz de solo toque, el atributo on="tap:..."  abre el selector cuando el usuario toca la entrada.


Ejemplo

Choose your travel dates

<div class="p1">   <p>Choose your travel dates</p>   <div class="align-content-center space-between">     <div class="ampstart-input">       <input class="border-none p0"         id="lb-start"         placeholder="Start date"         on="tap:lb.open"       role="textbox"         tabindex="0">    </div>     <div class="ampstart-input">       <input class="border-none p0"         id="lb-end"         placeholder="End date"         on="tap:lb.open"         role="textbox"         tabindex="0">     </div>     <button class="ampstart-btn caps"       on="tap:lb-picker.clear">Clear</button>   </div>   <amp-lightbox id="lb"     layout="nodisplay">     <button class="ampstart-btn absolute m1 caps small-button"       on="tap:lb.close"       tabindex="0">Close</button>     <div class="align-content-center">       <amp-date-picker id="lb-picker"         type="range"         mode="static"         layout="fixed-height"         height="360"       format="MM/DD/YYYY"         on="activate: lb.open;            deactivate: lb.close;"         start-input-selector="#lb-start"         end-input-selector="#lb-end"></amp-date-picker>     </div>   </amp-lightbox> </div>

Selector lightbox date picker

amp-date-picker también puede mostrarse como una vista de pantalla completa dentro de una caja de luz. El atributo fullscreen le dice al selector de fecha que tome el espacio en su contenedor y permita que su contenido se desplace verticalmente.


Ejemplo

Choose your travel dates

<div class="p1">   <p>Choose your travel dates</p>   <div class="align-content-center space-between">     <div class="ampstart-input">       <input class="border-none p0"        id="lb-fullscreen-start"         placeholder="Start date"        on="tap:lb-fullscreen.open"         role="textbox"         tabindex="0">     </div>   <div class="ampstart-input">       <input class="border-none p0"         id="lb-fullscreen-end"         placeholder="End date"         on="tap:lb-fullscreen.open"         role="textbox"         tabindex="0">     </div>     <button class="ampstart-btn caps"       on="tap:lb-fullscreen-picker.clear">Clear</button>   </div>   <amp-lightbox id="lb-fullscreen"     layout="nodisplay"     scrollable>     <button class="ampstart-btn m1 absolute caps z3 small-button"      on="tap:lb-fullscreen.close"       tabindex="0">Close</button>     <amp-date-picker id="lb-fullscreen-picker"       fullscreen       layout="fill"       mode="static"       type="range"       number-of-months="12"     format="MM/DD/YYYY"     on="activate: lb-fullscreen.open;             deactivate: lb-fullscreen.close;"       start-input-selector="#lb-fullscreen-start"       end-input-selector="#lb-fullscreen-end"></amp-date-picker>   </amp-lightbox> </div>

Selector de fecha en un formulario "Date picker in a form"

amp-date-picker se integra con los formularios de AMP. Si no proporciona una entrada para un selector estático, creará una entrada oculta para enviar en el formulario.


Ejemplo

<form method="post"   class="p1"   action-xhr="/components/amp-form/submit-form-xhr"   target="_top">   <amp-date-picker id="form-picker"     type="single"     mode="static"     layout="fixed-height"     height="360"     format="YYYY-MM-DD">   </amp-date-picker>   <input type="submit"     class="ampstart-btn caps">   <div submit-success>     <template type="amp-mustache">       Success! Thanks for trying the       <code>amp-form</code> demo!     </template>   </div>   <div submit-error>     <template type="amp-mustache">       Error!     </template>   </div> </form>



Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: