Javascript 分别获取冲突的引导日期和时间_Javascript_Jquery_Html_Date_Bootstrap 4

Javascript 分别获取冲突的引导日期和时间

javascript jquery html date bootstrap-4

Javascript 分别获取冲突的引导日期和时间,javascript,jquery,html,date,bootstrap-4,Javascript,Jquery,Html,Date,Bootstrap 4,我在表单中分别使用了日期选择器和日期时间选择器。如果我只按时间或日期工作，他们正在工作。但是当我把这两个时间都投入到工作中去的时候。它显示的不是时间而是日期。我的代码如下： <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"> </script> <sc

我在表单中分别使用了日期选择器和日期时间选择器。如果我只按时间或日期工作，他们正在工作。但是当我把这两个时间都投入到工作中去的时候。它显示的不是时间而是日期。我的代码如下：

<!DOCTYPE html>
<html>
<head>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>
<div>
                        <div class="container">
                            <div class="row">
                                <div class='col-sm-6'>
                                    <div class="form-group">
                                        <div class='input-group date' id='datetimepicker3' style="width:140px;">
                                            <input type="text" class="form-control">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $('#datetimepicker3').datetimepicker({
                                            format: 'LT'
                                        });
                                    });
                                </script>
                            </div>
                        </div>

                    </div>


                    <div class="container">
                        <div class="row">

                        </div>
                        <br />
                        <div class="row">
                            <div class='col-sm-3'>
                                <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>
                            <script type="text/javascript">
                                $(function () {
                                    var bindDatePicker = function () {
                                        $(".date").datetimepicker({
                                            format: 'YYYY-MM-DD',
                                            icons: {
                                                time: "fa fa-clock-o",
                                                date: "fa fa-calendar",
                                                up: "fa fa-arrow-up",
                                                down: "fa fa-arrow-down"
                                            }
                                        }).find('input:first').on("blur", function () {
                                            // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
                                            // update the format if it's yyyy-mm-dd
                                            var date = parseDate($(this).val());

                                            if (!isValidDate(date)) {
                                                //create date based on momentjs (we have that)
                                                date = moment().format('YYYY-MM-DD');
                                            }

                                            $(this).val(date);
                                        });
                                    }

                                    var isValidDate = function (value, format) {
                                        format = format || false;
                                        // lets parse the date to the best of our knowledge
                                        if (format) {
                                            value = parseDate(value);
                                        }

                                        var timestamp = Date.parse(value);

                                        return isNaN(timestamp) == false;
                                    }

                                    var parseDate = function (value) {
                                        var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
                                        if (m)
                                            value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

                                        return value;
                                    }

                                    bindDatePicker();
                                });
                            </script>
                        </div>
                    </div>


$（函数（）{
$（'#datetimepicker3'）。datetimepicker({
格式：“LT”
});
});


$（函数（）{
var bindDatePicker=函数（）{
$（“.date”）.datetimepicker({
格式：“YYYY-MM-DD”，
图标：{
时间：“fa-fa-clock-o”，
日期：“日历”，
向上：“法-法-箭头向上”，
向下：“法-法-箭头向下”
}
}).find（'input:first'）。打开（“模糊”，函数（）{
//检查日期是否正确。我们可以接受dd-mm-yyyy和yyyy-mm-dd。
//如果是yyyy-mm-dd，则更新格式
var date=parseDate（$（this.val（））；
如果（！isValidDate（日期））{
//基于momentjs创建日期（我们有）
日期=时刻（）.格式（'YYYY-MM-DD'）；
}
$（此）.val（日期）；
});
}
var isValidDate=函数（值、格式）{
格式=格式| |假；
//让我们尽我们所知解析日期
如果（格式）{
值=解析日期（值）；
}
var timestamp=Date.parse（值）；
返回isNaN（时间戳）=false；
}
var parseDate=函数（值）{
var m=value.match（/^（\d{1,2}）（\/\124;-）（\ d{1,2}）（\/\124-）？（\ d{4}）$/）；
如果（m）
值=m[5]+'-'+（“00”+m[3]）。切片（-2）+'-'+（“00”+m[1]）。切片（-2）；
返回值；
}
bindDatePicker（）；
});

我想你在这两个领域都有约会

这将解决您的问题

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker3'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker3').datetimepicker({
                format: 'LT'
            });
        });
    </script>
</div>


$（函数（）{
$（'#datetimepicker3'）。datetimepicker({
格式：“LT”
});
});

我想这就是你需要的：）

你现在只需复制和粘贴即可只需更改日期选择器的返回变量名称由此，它将干扰引导时间选择器的存储变量

<!DOCTYPE html>
<html>
<head>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>
<div>
                        <div class="container">
                            <div class="row">
                                <div class='col-sm-6'>
                                    <div class="form-group">
                                        <div class='input-group date' id='datetimepicker3' style="width:140px;">
                                            <input type="text" class="form-control">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $('#datetimepicker3').datetimepicker({
                                            format: 'LT'
                                        });
                                    });
                                </script>
                            </div>
                        </div>

                    </div>


                    <div class="container">
                        <div class="row">

                        </div>
                        <br />
                        <div class="row">
                            <div class='col-sm-3'>
                                <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>
                            <script type="text/javascript">
                                $(function () {
                                    var bindDatePicker = function () {
                                        $(".date").datetimepicker({
                                            format: 'YYYY-MM-DD',
                                            icons: {
                                                time: "fa fa-clock-o",
                                                date: "fa fa-calendar",
                                                up: "fa fa-arrow-up",
                                                down: "fa fa-arrow-down"
                                            }
                                        }).find('input:first').on("blur", function () {
                                            // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
                                            // update the format if it's yyyy-mm-dd
                                            var date = parseDate($(this).val());

                                            if (!isValidDate(date)) {
                                                //create date based on momentjs (we have that)
                                                date = moment().format('YYYY-MM-DD');
                                            }

                                            $(this).val(dates);
                                        });
                                    }

                                    var isValidDate = function (value, format) {
                                        format = format || false;
                                        // lets parse the date to the best of our knowledge
                                        if (format) {
                                            value = parseDate(value);
                                        }

                                        var timestamp = Date.parse(value);

                                        return isNaN(timestamp) == false;
                                    }

                                    var parseDate = function (value) {
                                        var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
                                        if (m)
                                            values = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

                                        return values;
                                    }

                                    bindDatePicker();
                                });
                            </script>
                        </div>
                    </div>


$（函数（）{
$（'#datetimepicker3'）。datetimepicker({
格式：“LT”
});
});