0
148
ViewsDatePicker como enlace que muestra el valor de la fecha
Me gustaría utilizar el selector de fecha de arranque para diseñar los filtros de fecha en un informe, como se muestra a continuación:
El HTML que estoy usando es:
<a href="javascript:;" class="badge badge-info datepicker filter_date_start_dp" data-date-format="mm/dd/yyyy"><i class="fal fa-filter" aria-hidden="true"></i> 11/1/2021</a>El calendario se está abriendo y la selección de valores establece el valor correctamente en el elemento de entrada oculto.
Los problemas que estoy experimentando son:
La fecha no aparece seleccionada en el primer clic.
¿Cómo puedo transferir el valor de fecha seleccionado al texto dentro de la etiqueta de anclaje?
El calendario no se cierra.
Tendré que actualizar la página en la selección.
No sé cómo manejar el n. ° 2 y el n. ° 4 anteriores, ya que datePicker no parece emitir ningún evento .
Seguí los sabios consejos de esta publicación, pero no parece ayudar:
cómo mostrar el selector de fecha al hacer clic en el enlace con jquery
Hay todos los mismos problemas, además de que el selector de fechas aparece en la parte superior izquierda de la página.
1 answers
Answer question0
Esto tomó algunas horas, pero finalmente está funcionando . En caso de que ayude a alguien a usar el selector de fecha de una etiqueta de anclaje y forzar la recarga de una página con la fecha seleccionada como parámetro:
Esto va en su $(documento).ready(función() {:
var dp_fields = obj.find('.dp'); if (dp_fields) { dp_fields.each(function () { init_datepicker($(this)); }); }Esta función también debe definirse en algún lugar:
function init_datepicker (obj) { let date_start = obj.data('start-date'); let reload = obj.data('reload'); let url_param = obj.data('url-param'); let target = obj.data('target'); obj.datepicker({ format: 'm/d/yyyy', defaultViewDate: date_start, autoclose: true, todayHighlight: true, }).bind('changeDate', function(date_obj) { let d = date_obj.date; if (date_obj) { if (d) { let d2 = new Date(d); let d_formatted = (`${ (d2.getMonth() + 1) }/${ d2.getDate() }/${ d2.getFullYear() }`); $(target).val(d_formatted); obj.find('.val').html(d_formatted); if (reload) { let url = new URL(window.location); if (d_formatted) { (url.searchParams.has(url_param) ? url.searchParams.set(url_param, d_formatted) : url.searchParams.append(url_param, d_formatted)); } else { url.searchParams.delete(url_param); } window.location = url; } } } }); }