my97前端日期插件使用示例

my97前端日期插件使用示例

首先,將my97日期插件的My97DatePicker文件夾整個放到項目的js文件夾下:

這裏寫圖片描述

編寫前端代碼,日期輸入框的代碼如下:

<!-- 這裏可以用dateFmt寫日期格式,比如說yyyy-MM-dd格式 -->
<input type="text" class="Wdate" name="datetime" id="" value="" onfocus="WdatePicker({lang:'zh-cn',readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>

My97日期插件實例.html的代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js" ></script>
        <script type="text/javascript">
            $(function(){

                // 日期驗證
                $(":submit").click(function(){
                    if($("input[name=datetime]").val() == ""){
                        alert("日期爲空!");
                        return false;
                    }else{
                        alert($("input[name=datetime]").val());
                    }
                });


            });

        </script>
    </head>
    <body>
        <form action="" method="post">
        <table border="0" cellspacing="0">
            <tr>
                <td>出生日期:</td>
                <td><input type="text" class="Wdate" name="datetime" id="" value="" onfocus="WdatePicker({lang:'zh-cn',readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})"/></td>
            </tr>
            <tr>
                <td出生日期:</td>
                <td><input type="submit" value="提交"/></td>
            </tr>
        </table>
        </form>
    </body>
</html>

測試結果:

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章