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" />
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="{"maxDate":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);
});