Javascript 日期选择器 asp.net mvc

Question

I'm new working with asp.net and I was very happy about the Html Helper that make editor for dates but I saw that it's not compatible with safari so I decided to use javascript date picker.

So I installed jquery.ui.combined, placed every(maybe too many)render or <script> and I tried to make a date picker with the following code but nothing append :

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

Can someone explain why ? Thanks in advance !

Answer 1

Well here is how I suggest you to do:

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

I created jsFiddle example from yours.

Note that you should add this i18n script to make it work:

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

You should add to your head this:

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

Answer 2

Im assuming that you got your answer above. However its awlays a best pracice to have script in a js file.

Lets say you create a js file like so:

$.myApplication = {

  init: function(){

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

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

}

The view where you want to execute the script:

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

In your bundleconfig:

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

layout:

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