example ejemplos bootstrap jquery jquery-ui jquery-ui-datepicker custom-data-attribute

ejemplos - Opciones de atributos para jQuery UI datepicker



datepicker php (6)

Tengo esta entrada con el atributo de datos de opciones .

<input class="data" type="text" data-options="{maxDate:''0''}" />

Me gustaría cargar el selector de fechas utilizando el valor de las opciones de datos como opciones. Ahora con el siguiente código, no funciona

$("input.data").each(function(){ var dateOptions=$(this).data(''options''); $(this).datepicker(dateOptions) });

pero si pongo la opción en el js como en el siguiente código, funciona:

$("input.data").each(function(){ $(this).datepicker({maxDate:''0''}) });

https://jsfiddle.net/VixedS/exfLf6o9/

Si alguien puede, preferiría una respuesta sin evaluar .


Cuando llama a data función de data , devuelve una cadena, por lo que tiene que convertirla en un objeto y luego pasarla al datepicker y eliminar el corchete del valor de data-options de data-options .

Soluciones:

1- usar eval

Javascript

eval(''({'' + $(this).data(''options'') + ''})'')

HTML

data-options="maxDate:''0''"

2- Jquery .data y rodea el valor de su atributo de datos por ''

Javascript

$(this).data(''options'')

HTML

data-options=''{"maxDate":0}''

3- @allenhwkim plugin o escriba una función personalizada ( el código de abajo está escrito por @allenhwkim ).

Javascript

function JSONize(str) { return str // wrap keys without quote with valid double quote .replace(/([/$/w]+)/s*:/g, function(_, $1){return ''"''+$1+''":''}) // replacing single quote wrapped ones to double quote .replace(/''([^'']+)''/g, function(_, $1){return ''"''+$1+''"''}) } jQuery.parseJSON(JSONize($(this).data(''options'')));

HTML

data-options="{maxDate:''0''}"

Nota: todas las soluciones anteriores están probadas y funcionan.

$("input.dataWithoutOptions").each(function() { $(this).datepicker({ maxDate: ''0'' }) }); $("input.data").each(function() { var dateOptions = eval(''({'' + $(this).data(''options'') + ''})''); console.log(typeof($(this).data(''options''))); //String console.log(typeof(dateOptions)); //Object $(this).datepicker(dateOptions) });

input { display: block; margin: 10px 0 20px; padding: 5px; }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> This has options attr: <input class="data" type="text" data-options="maxDate:''0''" />This is just a date pick: <input class="dataWithoutOptions" type="text" />

Jsfiddle


Los datos de Jquery analizan automáticamente las cadenas JSON en objetos. Solo tienes que seguir las instrucciones de jQuery.parseJson()

http://api.jquery.com/jquery.parsejson/

Cambiando tus opciones De data-options="{maxDate:''0''}" a data-options=''{ "maxDate": 0 }'' Works wonders

EDITAR: 28/12/2015

Ya que en XHML no desea usar propiedades simples, puede hacer lo opuesto y luego reemplazar las comillas simples con el doble y luego analizar la respuesta json. { ''maxDate'': 0 } luego .replace(/''/g, ''"'') y usa $.parseJSON()

$("input.dataWithoutOptions").each(function() { $(this).datepicker({ maxDate: ''0'' }) }); $("input.data").each(function() { var dateOptions = $.parseJSON($(this).data(''options'').replace(/''/g, ''"'')); $(this).datepicker(dateOptions); });

input { display: block; margin: 10px 0 20px; padding: 5px; }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> This has options attr: <input class="data" type="text" data-options="{ ''maxDate'': 0 }" />This is just a date pick: <input class="dataWithoutOptions" type="text" />

EDITAR: 30/12/2015

@Lidaranis: trae un buen punto.

Puede usar caracteres escapados para evitar expresiones regulares y análisis de json. {&quot;maxDate&quot;:0}

$("input.dataWithoutOptions").each(function() { $(this).datepicker({ maxDate: ''0'' }) }); $("input.data").each(function() { var dateOptions = $(this).data(''options''); $(this).datepicker(dateOptions); });

input { display: block; margin: 10px 0 20px; padding: 5px; }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> This has options attr: <input class="data" type="text" data-options="{&quot;maxDate&quot;:0}" />This is just a date pick: <input class="dataWithoutOptions" type="text" />


Prueba esto,

Opción 1

cambiar JavaScript a

$("input.data").each(function(){ var dateOptions=$(this).data(''options''); var options = dateOptions.split('', ''); var obj = {}; options.forEach(function(opt) { var item = opt.split('':''); obj[item[0]] = item[1]; }); $(this).datepicker(obj); });

y cambiar html a

<input class="data" type="text" data-options="maxDate:''0''"/>

Y no eval ()

vea el archivo de javascript https://jsfiddle.net/exfLf6o9/7/

Opcion 2

JavaScript

$("input.data").each(function(){ var dateOptions=$(this).data(''options''); dateOptions = dateOptions.substring(1,dateOptions.length-1); var options = dateOptions.split('', ''); var obj = {}; options.forEach(function(opt) { var item = opt.split('':''); obj[item[0]] = item[1]; }); $(this).datepicker(obj); });

y dejar html como está

vea el js fiddle https://jsfiddle.net/exfLf6o9/8/

Opción - 3

cambiar html a

<input class="data" type="text" data-options=''{"maxDate":"0"}'' />

y en javascript

$("input.data").each(function(){ var dateOptions=$(this).data(''options''); $(this).datepicker(dateOptions); });

No se recomienda usar eval() en JavaScript

Por favor vea el violín https://jsfiddle.net/exfLf6o9/5/


Quería tirar la técnica de carga perezosa, ya que nadie lo mencionó.

<div class="data" data-max-date="0"></div>

$.data() automáticamente camelCasará sus atributos de datos e intentará escribir cast. es decir, los datos de atributos html anteriores se convertirán en: { maxDate: 0 }

$(''.data'').each(function(){ $this = $(this); $this.datepicker($this.data()); });


la función datepicker necesita un objeto y actualmente está pasando una cadena, por lo que recibe el error.


data() devuelve una cadena cuando el datepicker() está esperando un objeto. La solución es convertir la cadena en un objeto:

$("input.data").each(function(){ var dateOptions = $(this).data(''options''); var dateOptionsAsObject = JSON.parse(dateOptions.replace(/([/w|/-|/_]+:)/g,"/"$1/":")); $(this).datepicker(dateOptionsAsObject); });