You are on page 1of 9

https://github.

com/jonmiles/bootstrap-datepaginator

http://wsnippets.com/responsive-date-pagination-ajax-mysqltwitter-bootstrap-php/

http://demo.pixinvent.com/robust-admin/rtl/horizontal-top-icon-menu-template/component-pagination.html#

http://stackoverflow.com/questions/31312913/bootstrap-date-paginator-change-language

Bootstrap Date Paginator


Un plugin de jQuery el cual tiene ya un gran componente de paginacin de Twitter
Bootstrap e inyecta un poco de magia basada en fecha. En el proceso de creacin
de una forma sumamente simplificada y modular da los resultados basados en la
fecha de paginacin en su aplicacin.

Para la documentacin completa y ejemplos, por favor visite Bootstrap Date


Paginator Website

Requirements

Bootstrap v3.0.3

jQuery v2.0.3

Moment.js v2.4.0

bootstrap-datepicker.js v1.2.0

Donde estos ltimos son las versiones actuales de bootstrap-datepaginator que


ha sido probado en contra. Otras versiones deberan trabajar, sino utilcenlo
bajosu propio riesgo.
Uso

Una lista completa de las dependencias necesarias para bootstrap-


datepaginator para funcionar correctamente.

<!-- Required Stylesheets -->


<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/bootstrap-datepicker.css" rel="stylesheet">

<!-- Required Javascript -->


<script src="./js/jquery.js"></script>
<script src="./js/moment.js"></script>
<script src="./js/bootstrap-datepicker.js"></script>
<script src="./js/bootstrap-datepaginator.js"></script>

El componente se vincular a cualquier elemento DOM existente.

<div id="paginator"></div>

Para el uso ms bsico, en la mayora de los casos, esto es todo lo que necesita.
$('#paginator').datepaginator();

Para la configuracin avanzada, un objeto de opciones se puede pasar en la


inicializacin.
var options = {
selectedDate: '2013-01-01',
selectedDateFormat: 'YYYY-MM-DD'
}
$('#paginator').datepaginator(options);

Options

endDate(fecha final)

String, or Moment. Default: End of time

Establece la fecha ms reciente que puede seleccionarse, se desactivarn todas


las fechas posteriores.
endDateFormat

String. Default: 'YYYY-MM-DD'

Establece el formato de fecha utilizado para analiza(parsing) representaciones


de cadena de endDate.

highlightSelectedDate

Boolean. Default: true

Distinguir o no, visualmente la fecha seleccionada.

highlightToday

Boolean. Default: true

Distinguir o no visualmente la fecha de hoy.

hint

String. Default: 'dddd, Do MMMM YYYY'

Formato utilizado para hover hint. tokens de cadena se analizan(parsed) a travs


de una fecha determinada.

injectStyle

Boolean. Default: true

Por defecto los estilos requeridos se inyectan en el DOM automticamente y no se


requiere ninguna referencia CSS externa. En el caso de que desea sobreescribir y
personalizar el estilo por defecto, establecer injectStyle false y asegurarse que
bootstrap-datepaginator.css (o su css modificado) se haga referencia.

Tenga en cuenta - donde mltiples paginators se aplican a la misma pgina, todo


se debe a establecer en injectStyle false en caso contrario el DOM inyecta estilo
que tiene prioridad.
itemWidth

Integer. Default: 35

Anchura mnima especificada en pxeles para un item.

navItemWidth

Integer. Default: 20

Anchura mnima especificada en pxeles para los elementos de navegacin(nav


items), por ejemplo, las flechas izquierda y derecha(left and right arrows)

offDays

String (csv). Default: 'Sat,Sun'

Establece das de la semana que se considerarn das de descanso(off days),


visualmente en gris.

offDaysFormat

String. Default: 'ddd'

Establece el formato utilizado cuando se esta evaluando offDays. Por ejemplo, los
formatos 'ddd' como una abreviatura de 3 letras que representa el da de la
semana, por lo tanto, se convierte en Sbado 'Sat'.

Por favor revise Moment.js gua de formato para una lista completa de opciones soportadas.

selectedDate

String, or Moment. Default: moment(), equivalente a new Date()

Establece la fecha seleccionada inicial, proporcionada, ya sea a traves de un


objeto moment(Moment.js) o cadena.
* Si usted est pensando en proporcionar una cadena, por favor asegrese de
revisar la opcin dateFormat.

selectedDateFormat

String. Default: 'YYYY-MM-DD'

Establece el formato de fecha que se utiliza en todo el ciclo de vida(lifecycle) de


los componentes cuando se esta analizando el objeto de fecha seleccionado.

selectedItemWidth

Integer. Default: 120

Anchura mnima especificada en pxeles para el elemento seleccionado.

showCalendar

Boolean. Default: true

Si se muestra o no, se puede hacer clic en el icono de calendario visible en la


fecha seleccionada. Al establecer en false va a quitar con eficacia la
funcionalidad de seleccin de fecha del calendario por parte del usuario.

showOffDays

Boolean. Default: true

Activar para apagar el mostrar das.

showStartOfWeek

Boolean. Default: true

Activar el inicio de la division de semana.


size

String. Default: normal

Establece la altura del componente paginador. Acepta small, normal, large.

startDate

String, or Moment. Default: Beginning of time

Establece la fecha ms temprana que puede seleccionarse, se desactivarn todas


las fechas anteriores.

startDateFormat

String. Default: 'YYYY-MM-DD'

Establece el formato de fecha utilizado al analizar representaciones de cadena de


startDate.

startOfWeek

String. Default: 'Mon'

Establace para fines de visualizacin del comienzo de la semana, ilustrado


visualmente por una lnea divisoria ms gruesa entre fechas.

startOfWeekFormat

String. Default: 'ddd'

Establece el formato utilizado en la evaluacin de startOfWeek. Por ejemplo, los


formatos 'ddd' como una abreviatura de 3 letras que representa el da de la
semana, por lo tanto, se convierte en Sbado 'Sat'.

Por favor revise Moment.js gua de formato para una lista completa de opciones
soportadas.
squareEdges

Boolean. Default: false

Cambia el radius border el que esta predeterminado de Bootstrap rounded


edges bordes redondeados (border-radius: 4px) y los square edges bordes
cuadrados (border-radius: 0px).

text

String. Default: 'ddd<br/>Do'

Formato utilizado para el elemento texto es decir, formato de fecha. tokens de


cadena se analizan a travs de una fecha dada.

textSelected

String. Default: 'dddd<br/>Do, MMMM YYYY'

Formato utilizado para el texto del elemento seleccionado. tokens de cadena se


analizan a travs de una fecha dada.

width

Integer. Default: 0 (auto)

Por defecto, el paginador llenar automticamente todo el ancho del mismo


contenedor. Sin embargo, si necesita ms control sobre el componente se puede
especificar cualquier anchura en pxeles por ejemplo: width: 400.
Mtodos

setSelectedDate

Establece la fecha seleccionada, lo que provoca una actualizacin para reflejar el


nuevo estado.
$('#paginator').datepaginator('setSelectedDate', ['2013-10-05', 'YYYY-MM-DD']);

Si es llamada sin pasar un argumento de formato, se utilizar


selectedDateFormat.
$('#paginator').datepaginator('setSelectedDate', '2013-10-05');

remove

Elimina el componente de paginador de fecha. Elimina eventos adjuntos, objetos


adjuntos interiores, as como elementos HTML aadido.
$('#paginator').datepaginator('remove');

Events

selectedDateChanged

Se dispara cuando ocurre un cambio de fecha por seleccion. Puede vincularse a


este utilizando el manejador callback o el mtodo estndar de jQuery .on

Ejemplo opciones usando manejador callback:

var options = {
onSelectedDateChanged: function(event, date) {
// Your logic goes here
}
}
$('#event-example').datepaginator(options);
y utilizando el mtodo de jQuery .on

$('#event-example').on('selectedDateChanged', function(event, date) {


// Your logic goes here
});

You might also like