bootstrap
DatetimePicker

bootstrap DatetimePicker 年月日時間を分割する検証

スクリーンショット 2017-09-13 18.24.53.png

version1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/script.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="/bower_components/moment/locale/ja.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<h1 id="h1">datetimepicker検証</h1>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        //ここに設定を詰める
        $('#datetimepicker1').datetimepicker({
            locale: 'ja',
            format : 'YYYY/MM/DD HH:mm:ss'
        });
        //ここに時間を変更した時に発火させる
        $("#datetimepicker1").on("dp.change", function (e) {
            console.log(e.date);//ここに色々入ってる
            //こいつらを自分で作ったinputに詰めれば良い??
            console.log(String(e.date).split(" ")[3]);//year
            console.log(new Date(e.date).getMonth() + 1);//month
            console.log(String(e.date).split(" ")[2]);//day
            console.log(String(e.date).split(" ")[4]);//time
        });
    });
</script>
</body>
</html>

出来たけどなんか。。。。わかりづらい

version2

formatを使う
こっちの方が良かったー

//htmlは上と一緒
<script>
    $(function () {
        //ここに設定を詰める
        $('#datetimepicker1').datetimepicker({
            locale: 'ja',
            format : 'YYYY/MM/DD HH:mm:ss'
        });
        //ここに時間を変更した時に発火させる
        $("#datetimepicker1").on("dp.change", function (e) {
            console.log(e.date.toDate());//ここに色々入ってる
            //こいつらを自分で作ったinputに詰めれば良い??
            console.log(e.date.format('YYYY'));//年
            console.log(e.date.format('MM'));//月
            console.log(e.date.format('DD'));//日
            console.log(e.date.format('HH:MM'));//時間:分
            console.log(e.date.format('SS'));//秒
        });
    });
</script>