Jquery datepicker没有反映回隐藏的输入

时间:2013-06-22 15:28:56

标签: jquery jquery-ui datepicker

我有以下jquery datapicker脚本,我的目标是将用户选择转换为时间戳,以便以后可以保存到数据库中。但是现在我试图让结果显示在隐藏文件中,但是没有用。 您将提供的任何帮助将不胜感激。

        <script type="text/javascript">
           $(document).ready(function(){                
                 $("#date").datepicker({
                    showButtonPanel: true,
                    minDate: '0M',
                    maxDate: '+90D',    
                    dateFormat: "d-MM-yy",  
                   });
                    var dateString = $('#date').val();
                    var timestamp = Date.parse(dateString).getTime()/1000; 
                    $('#hidden1').val( timestamp );                 
           });
        </script>
    </head>
    <body>
    <div> 
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
            <p> Enter expire date: <br />
            <input type="text" name="date" id="date"/></p>  
            <input type="hidden" name="hidden1" id="hidden1"  value=""/>            
            <button type="submit" name="btn_test" >Test Button</button>
        </form>
    </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

您使用Jquery datepicker控件在代码中显示:

http://api.jqueryui.com/datepicker/

目前只执行一次。

因此您需要绑定到触发事件,例如更改事件:

   $("#date").change(function(){
        var dateString = $('#date').val();
        var timestamp = Date.parse(dateString).getTime()/1000; 
        $('#hidden1').val( timestamp ); 
   });  

您还需要访问datepicker值:

 var dateString = $( "#date" ).datepicker( "getDate" );

而不是:

 var dateString = $('#date').val();

导致:

 $("#date").datepicker({
     showButtonPanel: true,
     minDate: '0M',
     maxDate: '+90D',    
     dateFormat: "d-MM-yy"  
 }).change(function(){
     var dateString = $( "#date" ).datepicker( "getDate" );
     if(dateString != null){
         var timestamp = dateString.getTime()/1000; 
         $('#hidden1').val( timestamp ); 
     }
 });  

JSFiddle:http://jsfiddle.net/eQqVg/6/