xdsoft.net DateTimePicker 的使用

Posted on Edited on In Views: Disqus:

 

一、基本範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
</head>

<body>
    <input id="datetimepicker" type="text">

    <script>
        $('#datetimepicker').datetimepicker();
    </script>
</body>

</html>

 

二、參數的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
</head>

<body>
    <input id="datetimepicker" type="text">

    <script>
        $('#datetimepicker').datetimepicker({
            startDate: '1971/05/01',
            format: 'Y-m-d'
        });
    </script>
</body>

</html>

 

三、事件的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
</head>

<body>
    <input id="datetimepicker" type="text">

    <script>
        $('#datetimepicker').datetimepicker({
            onSelectDate: (value, $i) => {
                alert(value);//Thu Oct 15 2020 06:01:05 GMT+0800
                alert($i.val());//"2020/10/15 06:01"
            }
        });
    </script>
</body>

</html>

 

參考資料：

https://xdsoft.net/jqplugins/datetimepicker/

https://github.com/xdan/datetimepicker