Javascript 日期选择器 asp.net mvc答案

【问题标题】：Javascript date picker asp.net mvcJavascript 日期选择器 asp.net mvc
【发布时间】：2016-03-15 13:24:03
【问题描述】：

我是 asp.net 的新手，我很高兴使用 Html Helper 制作日期编辑器，但我发现它与 safari 不兼容，所以我决定使用 javascript 日期选择器。

所以我安装了 jquery.ui.combined，放置了每个（可能太多）render 或 <script>，然后我尝试使用以下代码制作日期选择器，但没有附加任何内容：

<script>
      $(function() {
        $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
        $( "#locale" ).change(function() {
          $( "#datepicker" ).datepicker( "option",
            $.datepicker.regional[ $( this ).val() ] );
        });
      });
    </script>
     //more code 
    <input type="text" id="datepicker">

有人可以解释为什么吗？提前致谢！

【问题讨论】：

你能在 jsfiddle 上重现这个吗？
jsfiddle.net/qvt4zj9x/2 不知道是不是你想要的，但我不能做得更好
对我来说很好。你包括 jquery 和 jquery UI 吗？你是否先包含 Jquery，然后包含 jquery UI？
我想我的 _Layout.cshtml 文件中有@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui")
但是我刚刚在我的 BundleConfig.cs 中检查了，我没有 jqueryui 的条目，是什么？

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

我建议你这样做：

<script>
  $(function() {
    $("#datepicker").datepicker($.datepicker.regional['fr']);
    $("#locale").change(function() {
      var locale = $.datepicker.regional[$(this).val()];
      //destroy previose datapicker
      $("#datepicker").datepicker("destroy");
      //init new one
      $("#datepicker").datepicker(locale);
    });
  });

</script>

<select id="locale">
  <option val="fr">fr</option>
  <option val="en">en</option>
  <option val="ru">ru</option>
  <option val="de">de</option>
</select>
<input type="text" id="datepicker">

我根据你的创建了jsFiddle example。

请注意，您应该添加此 i18n 脚本以使其工作：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>

你应该添加到你的head这个：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>

【讨论】：

谢谢，但不是我的代码不起作用，这是我的导入问题，我找不到问题出在哪里......
@MrPixel6 您可以从示例中复制导入。然后通过脚本一一更改，找出问题出在哪里
我已经复制了所有东西，但它仍然无法正常工作，只有一个没有日历的空输入:(
@MrPixel6 您应该将我在回答中提到的内容添加到您的头部。如果存在，请删除其他 jquery 版本，请检查
终于找到了...我是对的只是错误的脚本导入...感谢您的帮助！

【解决方案2】：

我假设您在上面得到了答案。然而，最好的做法是在 js 文件中包含脚本。

假设您像这样创建一个 js 文件：

$.myApplication = {

  init: function(){

        $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );

        $( "#locale" ).change(function() {
        $( "#datepicker" ).datepicker( "option",
           $.datepicker.regional[ $( this ).val() ] );
        });     
  }

}

要执行脚本的视图：

@section Scripts {
    <script type="text/javascript">
        $(function () {
            $.myApplication.init();
        })
    </script>
    }

在你的 bundleconfig 中：

bundles.Add(new ScriptBundle("~/bundles/CustomScripts").Include(
                  "~/Scripts/MyApp.js"));

布局：

 @Scripts.Render("~/bundles/CustomScripts")

【讨论】：