DateTimePicker time control:, datetimepicker Control

DateTimePicker time control:, datetimepicker Control
DateTimePickerTime Control:

Http://xdsoft.net/jqplugins/datetimepicker/

You can refer to the document to set various attributes and formats.

Usage:

First download datetimepicker-master.

1. Introduce css and js files to the page (note that you should put them after the body ):

<!-- this should go after your </body> --><link rel="stylesheet" type="text/css"    href="/microshop-settlement-server/resources/datetimepicker-master/jquery.datetimepicker.css" /><script    src="/microshop-settlement-server/resources/datetimepicker-master/jquery.js"></script><script    src="/microshop-settlement-server/resources/datetimepicker-master/build/jquery.datetimepicker.full.min.js"></script>

2. Click the text box to bring up the calendar option:

Html:

<input  id="datetimepicker" type="text" name="createTime" value="<fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss" value="${createTime }"/>" maxlength="20"/>

Here the jsp el label fmt is used: So the page must be introduced first:

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

JavaScript:

<Script type = "text/javascript"> jQuery ('# datetimepicker '). datetimepicker ({format: 'Y-m-d H: I: s' // This is to set the calendar format}); </script>

Http://php.net/manual/ru/function.date.php (time format can refer to this, such as 10:00:01)

3. directory structure:

4. demo preview: