JQuery Mobile datepicker在设置任何选项时都会丢失主题

JQuery Mobile datepicker loses theme when any options are set

本文关键字：选项 datepicker Mobile 设置 任何 JQuery      更新时间：2023-09-26

我使用JQuery移动与它的移动主题的日期picker插件。以下是相关代码，按照JQuery Mobile Datepicker演示，其工作方式与预期一样:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="jquery.mobile.datepicker.css"/>
<script src="jquery-1.11.3.min.js"></script>
<script>
    //reset type=date inputs to text
    $( document ).bind( "mobileinit", function(){
        $.mobile.page.prototype.options.degradeInputs.date = true;
    }); 
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="jquery.mobile.datepicker.js"></script>
</head>
<body>
  <input id="servicedate" name="servicedate" data-role="date" type="text" />
</body>

上面生成了一个样式合适的移动日期选择器，绑定了"servicedate"输入，就像这样。

现在，任何与datepicker交互的尝试，比如动态更改任何选项，都会导致它失去其移动风格。在body的底部，我添加了:

<script>
  $("#servicedate").datepicker({ dateFormat: "DD, MM dd yy", }); 
</script>

…而它现在，虽然选项确实工作，产生相当不愉快的外观，像这样的非主题的日期选择器。

任何帮助/指导我做错了什么将不胜感激。谢谢。

您需要在header

中添加对jquerui .css的引用

像这样:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

我宁愿不这样做，但这是我让它工作的唯一方法。

(编辑)

相关文章：