ejemplos - Opciones de atributos para jQuery UI datepicker

datepicker php

Question

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 .

Answer 1

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

Answer 2

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. {"maxDate":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" />

Answer 3

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/

Answer 4

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());
});

Answer 5

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

Answer 6

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);
});