Bootstrap 更改日期



Bootstrap 更改日期

Bootstrap Datepicker获取更改事件的日期

在本节中,我们将学习如何使用Bootstrap datepicker获取格式更改的事件的日期。有时我们的项目需要选择日期选择。如果我们要为日期输入启用输入字段,则datepicker将非常​​有用。使用此功能,我们可以轻松地选择日期,并且它是用户友好的。我们可以从"日期选择器"对话框中选择日期,而不是在输入字段中手动输入日期。使用此方法,可以避免用户错误,因为它将使我们能够看到每个日期对应的星期几。它提供了一个交互式下拉菜单,可用于从日历中轻松选择日期。
在某些情况下,日期选择器可以触发事件。所有事件都将附加数据附加到事件隐藏中。我们的脚本的Bootstrap已经具有一种格式。使用这种格式,可以进行更好的负责任的设计。对于我们来说,使用日期选择器及其日期格式非常容易,例如dd-mm-yyyy,yyyy/mm/dd,dd/mm/yyyy,yyyy-mm-dd等。我们需要添加一种参数格式以及设置日期格式所需的格式。当我们单击名为"使用日期获取数据"的按钮时,在这种情况下,datepicker设置日期的值,然后使用jQuery获得该新的日期值。这将阻止我们的表单提交,我们将使用该日期值来运行ajax请求。除了将获得新日期值的ajax之外,其他所有ajax都将正常运行。
当用户使用input元素并将日期直接输入到其中时,我们可以使用输入元素的onChange事件。但是,当使用日期选择器更改日期时,或者可以说用户单击日历的日期时,在这种情况下,将不会调用onChange处理程序。有时,我们需要一个日期选择器来获取选定日期的日期。一旦我们使用日历应用程序,我们就希望得到同样的东西。我们在引导日期选择器中进行了研究,我们可以使用事件" changeDate"获得选定的日期,但是在此应用中,我们还希望以我们的格式获得选定的日期。经过研究,我们找到了解决方案,如以下示例所示。
示例:
 $('#event_date').datepicker({
    format: 'mm/dd/yyyy',
}).on('changeDate', function(e) {
    console.log(e.format());
});

当我们在项目中使用此示例时,我们将获得更改事件的日期。