Putting datepicker in an external file doesn't work

Putting datepicker in an external file doesn't work

Hi, I'm quite new to Jquery and can't wrap my head around the problem I have right now.

I have this code:

  1. //Changing date format to dd/mm/yy in French.
    $.datepicker.regional['fr'] = {
      closeText: 'Fermer',
      prevText: '<Préc',
      nextText: 'Suiv>',
      currentText: 'Courant',
      monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
      monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jui',
      dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
      dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
      dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
      weekHeader: 'Sm',
      //dateFormat: 'dd/mm/yy',
      dateFormat: 'dd/mm/yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''};
    //End of change date format and language
    var dateFormat = 'dd/mm/yy',
        from = $( "#from" ).datepicker({
          dateFormat: "dd/mm/yy",
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1,
    .on( "change", function() {dateFrom.datepicker( "option", "maxDate", getDate( this ) );});
    .on( "change", function() {dateTo.datepicker( "option", "minDate", getDate( this ) );}),
      to = $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      return date;

I use it to create a calendar (put in french) to create a parseDate.

When I put it in the html file It work but when I put it in an external file under root/Scripts/Calendrier.js the code doesn't work and I can't find a way to make it work!

Here is my html file:

  1. <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Datepicker - Select a Date Range</title>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript"src="/Scripts/Calendrier.js"></script>
        <label for="from">From</label>
        <input type="text" id="dateFrom" name="from">
        <label for="to">to</label>
        <input type="text" id="dateTo" name="to">

Does somebody have a solution for my problem?