Javascript 清除日期时间选择器字段中的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32142432/
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
Clear the value in a datetimepicker field
提问by RagD
I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
我确信这很简单，而且我对 jquery/javascript 的理解阻碍了我 - 但我无法让它发挥作用。
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
我需要做的就是 - 单击屏幕上的按钮时，将表单上的某些输入字段清除回其原始值。
This is working fine, for all fields except a datetimepicker field.
这对于除 datetimepicker 字段之外的所有字段都工作正常。
Here is the relevant bits of code, that defines the input field :
这是定义输入字段的相关代码位：
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
我正在初始化 datetimepicker 如下：
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
要清除输入字段，我有：
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
所以，有人可以给我我需要插入到 clearActionForm() 中的代码行，以便将 START_DATE 字段清除为空。
Thanks.
谢谢。
回答by J Santosh
回答by Whitecat
If you are using the eonasdan datetimepickeruse the following:
如果您使用的是eonasdan datetimepicker，请使用以下内容：
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
下面是使用不同类型更改的演示。
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<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.47/js/bootstrap-datetimepicker.min.js"></script>
<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>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>回答by Pi Programs
Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
假设您正在使用xdsoft.net/jqplugins/datetimepicker 中的 datetimepicker 插件，清除 datetimepicker 当前值的一种快速方法如下：
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
作为替代方案（这将 datetimepicker 的值设置为当前时间）：
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.
此值与日期时间选择器的格式不匹配，但会在使用日期时间选择器时自动转换为正确格式。
回答by tibc-dev
If you are using the eonasdan datetimepicker use the following:
如果您使用的是 eonasdan datetimepicker，请使用以下内容：
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);
回答by SantoshK
Easy way to rest the selected date as well as highlighted date by below concept
简单的方法来休息选定的日期以及通过以下概念突出显示的日期
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');
