Ответ 1

Данные Jquery автоматически анализируют строки JSON на объекты. Вам просто нужно следовать указаниям от jQuery.parseJson()

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

Изменение ваших параметров От data-options="{maxDate:'0'}" до data-options='{ "maxDate": 0 }' Произведения чудес

EDIT: 12/28/2015

Так как в XHML вы не хотите использовать одиночные ' для свойств, вы можете сделать oposite, а затем заменить одиночные кавычки на double, а затем разобрать ответ json. { 'maxDate': 0 } затем .replace(/'/g, '"') и используйте $.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" />

Ответ 2

Когда вы вызываете функцию data, она возвращает строку, поэтому вам нужно преобразовать ее в объект, а затем передать ее в datepicker и удалить фигурные скобки из значения data-options.

Решения:

1- Использовать eval

Javascript

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

HTML

data-options="maxDate:'0'"

2- JQuery .data и окружает ваше значение атрибута данных '

Javascript

$(this).data('options')

HTML

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

3- использовать плагин или написать пользовательскую функцию (ниже код написанный @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'}"

Примечание: все вышеперечисленные решения протестированы и работают.

$("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" />

Ответ 3

функция datepicker нуждается в объекте, и в настоящее время вы передаете строку, поэтому вы получаете ошибку.

Ответ 4

Попробуйте это,

Вариант - 1

изменить JavaScript на

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

и измените html на

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

И не eval()

см. скрипт javascript https://jsfiddle.net/exfLf6o9/7/

Вариант - 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);
});

и оставить html как

см. js fiddle https://jsfiddle.net/exfLf6o9/8/

Вариант - 3

изменить html на

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

и в javascript

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

с использованием eval() не рекомендуется в JavaScript

Посмотрите скрипку https://jsfiddle.net/exfLf6o9/5/

Ответ 5

data() возвращает строку, когда datepicker() ожидает объект. Решение состоит в том, чтобы преобразовать строку в объект:

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

Ответ 6

Требуется бросить технику ленивой загрузки, так как никто ее не упоминал.

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

$.data() автоматически вернет ваши атрибуты данных и попытается напечатать букву. то есть приведенные выше данные атрибута html станут: { maxDate: 0 }

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