2014-10-15 3 views
0

Мне нужно установить дату в одном текстовом поле ввода моей html-страницы, а затем вызвать сценарий после установки даты и присвоить новое значение даты другому текстовому полю. Новое значение даты рассчитывается с использованием первого значения даты. Я использую для этого $("#id").change(). Но это не работает, как я ожидал. Это мой код для этого.Метод изменения JQuery не работает

<html> 
    <head> 
     <title>my file</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

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

     <!-- Load jQuery JS --> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <!-- Load jQuery UI Main JS --> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <script> 
      $(function() { 
       $("#firstDate,#lastDate").datepicker({dateFormat: 'dd-mm-yy'}); 
      }); 
     </script> 

     <script> 
      $(document).ready(function() { 
       $("#firstDate").change(function(event) { 
        event.preventDefault(); 
        var initialDate = ("#firstDate").val(); 
        var totDate = initialDate; 
        var dateArray = totDate.split("-"); 

        var dateObj = new Date(dateArray[2], dateArray[1] - 1, dateArray[0]); 
        dateObj.setDate(dateObj.getDate() + 14); 
        totDate = (dateObj.getDate() + 14) + "-" + dateObj.getMonth() + "-" + dateObj.getFullYear(); 
        alert(totDate); 
        $("#lastDate").val(totDate); 

       }); 
      }); 

     </script> 

    </head> 
    <body> 
     <div> 
      first date: <input type="text" id="firstDate"/> 
      last date: <input type="text" id="lastDate" /> 
     </div> 
    </body> 
</html> 

Я поставил предотвратить дефолт, чтобы остановить страницы становится прокручивается вверх после того, как скрипт вызывается (Это часть большой HTML-страницы). Почему это не работает должным образом. Можете ли вы объяснить мне, почему это не помогает и не позволяет решить эту проблему.

+1

отсутствует '$' in '(" #firstDate "). val()' ... должен быть '$ (" # firstDate "). val()' - http://jsfiddle.net/arunpjohny/w52jtxLb/1/ –

+0

см. мой ответ ниже ... это на самом деле намного больше сим pler, если вы используете правильные методы api –

ответ

6

Проблемы в сценарии недостающего $ как я сказал в моем комментарии ...

Но я хотел бы изменить реализацию использовать datepicker api методы

$(document).ready(function() { 
 
    $("#firstDate").change(function(event) { 
 
    var dateObj = $("#firstDate").datepicker('getDate'); 
 
    dateObj.setDate(dateObj.getDate() + 14); 
 
    $("#lastDate").val($.datepicker.formatDate('dd-mm-yy', dateObj)); 
 

 
    }); 
 
}); 
 
$(function() { 
 
    $("#firstDate,#lastDate").datepicker({ 
 
    dateFormat: 'dd-mm-yy' 
 
    }); 
 
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<div> 
 
    first date: <input type="text" id="firstDate"/> 
 
    last date: <input type="text" id="lastDate" /> 
 
</div>