Javascript 从日期范围值生成新的输入字段_Javascript_Html

Javascript 从日期范围值生成新的输入字段

javascript html

Javascript 从日期范围值生成新的输入字段,javascript,html,Javascript,Html,当用户使用日期范围选择器输入开始日期和结束日期时，我正在制作一个HTML表单。在用户输入日期之后，我想从days from date range picker的值生成新的输入字段。例如：2020-11-24-2020-11-27=3天。所以我想生成3个新的输入字段。这是我的密码：从日期范围值生成新字段从日期范围值生成新的输入字段出发日期：抵达日期：我想在这里生成新的输入字段 var today=新日期（新日期（）.getFullYear（），新日期（）.getMonth（），新

当用户使用日期范围选择器输入开始日期和结束日期时，我正在制作一个HTML表单。在用户输入日期之后，我想从days from date range picker的值生成新的输入字段。例如：2020-11-24-2020-11-27=3天。所以我想生成3个新的输入字段。这是我的密码：


从日期范围值生成新字段


从日期范围值生成新的输入字段


出发日期：
抵达日期：
我想在这里生成新的输入字段
var today=新日期（新日期（）.getFullYear（），新日期（）.getMonth（），新日期（）.getDate（））；
$（'departureDate'）。日期选择器({
uiLibrary:'bootstrap4'，
iconsLibrary:“fontawesome”，
格式：'yyyy-mm-dd'，
minDate：今天，
maxDate:函数（）{
返回$（'arrivalDate'）.val（）；
}
});
$（“#arrivalDate”）.datepicker({
uiLibrary:'bootstrap4'，
iconsLibrary:“fontawesome”，
格式：'yyyy-mm-dd'，
minDate:函数（）{
返回$（“#出发日期”）.val（）；
}
});

这就是你要找的吗？您可以使用jqueryappend函数。阅读更多：


从日期范围值生成新字段


从日期范围值生成新的输入字段


出发日期：
抵达日期：
var dateSrc，dateTrg；
var today=新日期（新日期（）.getFullYear（），新日期（）.getMonth（），新日期（）.getDate（））；
$（'departureDate'）。日期选择器({
uiLibrary:'bootstrap4'，
iconsLibrary:“fontawesome”，
格式：'yyyy-mm-dd'，
minDate：今天，
maxDate:函数（）{
返回$（'arrivalDate'）.val（）；
}
});
$（“#arrivalDate”）.datepicker({
uiLibrary:'bootstrap4'，
iconsLibrary:“fontawesome”，
格式：'yyyy-mm-dd'，
minDate:函数（）{
返回$（“#出发日期”）.val（）；
}
});
$（'.new dates'）。日期选择器({
uiLibrary:'bootstrap4'，
iconsLibrary:“fontawesome”，
格式：'yyyy-mm-dd'，
minDate:函数（）{
返回$（“#出发日期”）.val（）；
}
});
功能手柄更改（参考）{
如果（$（ref.attr（'id'）=='departureDate'）{
dateSrc=$（ref.val（）；
}否则{
dateTrg=$（ref.val（）；
}
if（dateSrc&&dateTrg）{
generateFields（）；
}
}
函数generateFields（）{
var One Day=24*60*60*1000；
var range=Math.round（Math.abs（（新日期（dateTrg）-新日期（dateSrc））/oneDay））；
如果（！$（“#resultDate”）。为（':empty'））{
$（“#结果日期”）.html（“”）；
}
如果（范围>0）{
对于（变量i=0；i


    <html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Generate new field from date range value</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <br>
    <div class="container">
        <h1>Generate new input field from date range value</h1> <br> <br>
        Departure Date: <input id="departureDate" width="276" onchange="handleChange(this)" />
        Arrival Date: <input id="arrivalDate" width="276" onchange="handleChange(this)"/>

        <div id="resultDate">
        </div>
    </div>
    <script>
        var dateSrc, dateTrg; 
        var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
        $('#departureDate').datepicker({
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        format:'yyyy-mm-dd',
        minDate: today,
        maxDate: function () {
            return $('#arrivalDate').val();
        }
    });
    $('#arrivalDate').datepicker({
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        format:'yyyy-mm-dd',
        minDate: function () {
            return $('#departureDate').val();
        }
    });

    $('.new-dates').datepicker({
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        format:'yyyy-mm-dd',
        minDate: function () {
            return $('#departureDate').val();
        }
    });

    function handleChange(ref) {
        if ($(ref).attr('id') === 'departureDate') {
            dateSrc = $(ref).val(); 
        } else {
            dateTrg = $(ref).val(); 
        }
        if (dateSrc && dateTrg) { 
            generateFields();
        }
    }

    function generateFields() {
        var oneDay = 24 * 60 * 60 * 1000;
        var range = Math.round(Math.abs((new Date(dateTrg) - new Date(dateSrc)) / oneDay));
        if (!$("#resultDate").is(':empty')) {
            $("#resultDate").html(''); 
        }
        if (range > 0) {
            for (var i = 0 ; i < range ; i ++) {
                $("#resultDate").append('Result Date - ' + i + ': <input id="resultDate_' + i + '" width="276" onchange="doSomethingWithNewDate(this)"/>')
                $("#resultDate_" + i).datepicker({
                    uiLibrary: 'bootstrap4',
                    iconsLibrary: 'fontawesome',
                    format:'yyyy-mm-dd',
                    minDate: function () {
                        return $('#departureDate').val();
                    }
                });
            }
        } else {
            $("#resultDate").html(''); 
        }
    }

    function doSomethingWithNewDate(ref) {
        
    }
    </script>
</body>
</html>