twitter-bootstrap 从一个引导日期时间选择器向日期添加天数并镜像到另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17394616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add days to a date from one bootstrap datetimepicker and mirror to another?
提问by Nathan Pitman
I'm using the Bootstrap Date Time Picker (http://www.malot.fr/bootstrap-datetimepicker/) to allow a user to select a date and time in one field and then need to recommend a date 21 days following the initially selected date/time in a 2nd field.
我正在使用 Bootstrap 日期时间选择器 ( http://www.malot.fr/bootstrap-datetimepicker/) 来允许用户在一个字段中选择日期和时间，然后需要在最初的 21 天后推荐一个日期在第二个字段中选择的日期/时间。
I'm wondering how I would go about 'mirroring' one field to another like this but add X days? There is a feature documented that allows mirroring but I don't see how to use this to add days (http://www.malot.fr/bootstrap-datetimepicker/demo.php- see mirror field demo).
我想知道如何像这样将一个字段“镜像”到另一个字段，但要添加 X 天？有记录的功能允许镜像，但我不知道如何使用它来添加天数（http://www.malot.fr/bootstrap-datetimepicker/demo.php- 请参阅镜像字段演示）。
i.e. take the date selected using the datetimepicker for field A and mirror it to field B 'but' add 21 days to the date and use that as the default date for the B field?
即获取使用日期时间选择器为字段 A 选择的日期并将其镜像到字段 B '但是'在日期上添加 21 天并将其用作 B 字段的默认日期？
采纳答案by Nathan Pitman
With a little prodding in the right direction from mccannf I got this working, here's my finished code snippet:
通过 mccannf 朝着正确方向的一点刺激，我得到了这个工作，这是我完成的代码片段：
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$("input.datepicker").datetimepicker(pickerOptsGeneral).on('changeDate', function(ev){
if ($(this).hasClass('linked')) {
// Get field name
var startField = this.name;
var endField = startField.replace("Start", "End");
// Get start date and add 21 days
endDate = new Date(ev.date);
endDate.setDate(endDate.getDate() + 21);
endDateString = ('0' + endDate.getDate()).slice(-2) + '/'
+ ('0' + (endDate.getMonth()+1)).slice(-2) + '/'
+ endDate.getFullYear();
// Set end date
$('input[name='+endField+']').val(endDateString);
}
});
回答by Nathan Pitman
Using the code mccannf provided here's what I have now:
使用这里提供的代码 mccannf 是我现在所拥有的：
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$("input.datepicker").datetimepicker(pickerOptsGeneral).on('changeDate', function(ev){
if ($(this).hasClass('linked')) {
var startfield = this.name;
var endfield = startfield.replace("Start", "End");
var startDate = (new Date(ev.date)) + 21;
console.log(startDate);
endfield.val(startDate.toISOString());
endfield.datetimepicker('update');
}
});
and my markup:
和我的标记：
<input type="text" placeholder="00/00/0000" value="" id="pStartDate1" name="fpStartDate1" maxlength="10" class="datepicker linked">
I tried to create a fiddle of this but failed miserably! :/
我试图创造一个小提琴，但失败了！：/
When I echo 'StartDate' to the screen it appears as:
当我在屏幕上回显“StartDate”时，它显示为：
Tue Jul 02 2013 10:16:24 GMT+0100 (BST)21
2013 年 7 月 2 日星期二 10:16:24 GMT+0100 (BST)21
Which I'm guessing may be the cause of the problem, that doesn't seem like a value that could be transposed into a valid date in any way. :?
我猜这可能是问题的原因，这似乎不是一个可以以任何方式转换为有效日期的值。：？
回答by mccannf
Try something like this:
尝试这样的事情：
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$('#firstDate')
.datetimepicker(pickerOptsGeneral)
.on('changeDate', function(ev){
var oldDate = new Date(ev.date);
var newDate = new Date();
newDate.setDate(oldDate.getDate() + 21);
secondDate.val(newDate.getDate()+"/"+(newDate.getMonth()+1)+"/"+newDate.getFullYear());
secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);
回答by Varaj Vignesh
onchange getting the firstpicker date and setting to second picker. little change in above answer works good!!!!
onchange 获取 firstpicker 日期并设置为第二个picker。上述答案的小变化效果很好！！！！
$('firstPicker').on('dp.change', function(e){
endDate = new Date(e.date);
endDate.setDate(endDate.getDate() + 280);
var endDtae= ('0' + endDate.getDate()).slice(-2) + '/'
+ ('0' + (endDate.getMonth()+1)).slice(-2) + '/'
+ endDate.getFullYear();
$("secondpicker").val(endDtae)
})
回答by hypers
As of now I would suggest a similar solution that uses Moment.jslibrary for date manipulation. Some advantages of this library:
到目前为止，我会建议使用Moment.js库进行日期操作的类似解决方案。这个库的一些优点：
- very tidy code for date and time operations
- versatile and very efficient date and time conversion and formatting
- good locale operations support
- very popular, often comes bundled with other packages (e.g., Chart.js)
- free distributed (MIT license)
- 用于日期和时间操作的非常整洁的代码
- 多功能且非常有效的日期和时间转换和格式
- 良好的语言环境操作支持
- 非常流行，通常与其他软件包捆绑在一起（例如 Chart.js）
- 免费分发（MIT 许可）
JS code:
JS代码：
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$('#firstDate')
.datetimepicker(pickerOptsGeneral)
.on('changeDate', function(ev){
var oldDate = moment(ev.date);
var newDate = oldDate;
newDate.add(21, 'days'); // note that moment object is mutating
secondDate.val(newDate.format("DD/MM/YYYY")); // format is case sensitive
secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);
