编辑：2015年12月28日

Question

我的输入带有数据选项属性。

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

我想使用数据选项值作为选项加载 datepicker 。现在使用以下代码，不起作用

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

但是如果我把选项放在js上，就像在下面的代码中一样，它可以工作：

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

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

如果有人可以，我希望答案没有评估。

Answer 1

当您调用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-使用plugin或编写自定义函数（the below code由@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'}"

注意：以上所有解决方案均已经过测试且有效。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Jsfiddle

Answer 2

Jquery数据自动将JSON字符串解析为对象。您只需按照jQuery.parseJson()

中的说明操作即可

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

将选项从data-options="{maxDate:'0'}"更改为data-options='{ "maxDate": 0 }'创造奇迹

编辑：2015年12月28日

由于在XHML中你不想使用单'作为属性，你可以使用oposite然后用double替换单引号然后解析json响应。 { 'maxDate': 0 }然后.replace(/'/g, '"')并使用$.parseJSON()

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：2015年12月30日

@Lidaranis：提出一个好点。

您可以使用转义字符来避免正则表达式并解析json。 {"maxDate":0}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

datepicker函数需要一个对象，当前你正在传递一个字符串，因此你得到错误。

Answer 4

当data()期待一个对象时，

datepicker()返回一个字符串。解决方案是将字符串转换为对象：

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

Answer 5

由于没有人提及它，所以想要抛弃延迟加载技术。

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

$.data()将自动使用您的数据属性并尝试输入强制转换。即上述html属性数据将变为：{ maxDate: 0 }

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

jQuery UI datepicker的属性选项

5 个答案:

编辑：2015年12月28日

编辑：2015年12月30日