jQuery UI 日期选择器的属性选项

Question

我有这个带有 data-options 属性的输入。

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

我想使用 data-options 值作为选项来加载 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'}"

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

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

Jquery 数据自动将 JSON 字符串解析为对象。您只需按照jQuery.parseJson()的指示进行操作即可

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

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

编辑：2015 年 12 月 28 日

由于在 XHML 中您不想将单个 ' 用于属性，因此您可以执行相反的操作，然后将单引号替换为双引号，然后解析 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" />

编辑：2015 年 12 月 30 日

@Lidaranis：提出了一个很好的观点。

您可以使用转义字符来避免正则表达式和解析 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

datepicker 函数需要一个对象，而当前您正在传递一个字符串，因此您会收到错误消息。

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

不建议在 JavaScript 中使用 eval()

请看小提琴https://jsfiddle.net/exfLf6o9/5/

Answer 5

data() 在datepicker() 期待一个对象时返回一个字符串。解决方法是将字符串转换为对象：

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

Answer 6

想扔掉延迟加载技术，因为没人提到它。

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

$.data() 会自动将你的数据属性进行驼峰式转换并尝试进行类型转换。即上面的html属性数据会变成：{ maxDate: 0 }

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