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