Add a DateTimePicker jQuery plugin to Input Field

This Article shows the simplest way to add date time picker functionality to your websites to provide better end user experience. Here we are using DateTimePicker jQuery plugin to add date-time picker to input field, this article will help you lot for that. This plugin is very simple and easy to implement and provides various options to customize your Date Time Picker as per your project requirement.

Live Demo

Setting up DateTimePicker jQuery plugin

First include the jQuery library file before the closing </head> tag.

<!-- this file should add inside the <head></head> tag -->
<script src="js/jquery.min.js"></script>

Now include the js and css files of DateTime Picker jQuery plugin. those files should be add after the </body> tag.

<!-- those files should be add after the </body> tag -->
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css"/>
<script src="js/jquery.datetimepicker.js"></script>

HTML Code

<input id="datetimepicker" type="text" >

JavaScript Code with DatePicker Example

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker').datetimepicker();
    });
</script>

Output:

TimePicker Example

//TimePicke Example
$('#datetimepicker1').datetimepicker();

Output:

Inline DateTimePicker Example

//Inline DateTimePicker Example
$('#datetimepicker2').datetimepicker({
    format:'Y-m-d H:i',
    inline:true
});

Output:

January
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00

minDate and maxDate Example

//minDate and maxDate Example
$('#datetimepicker3').datetimepicker({
     format:'Y-m-d',
     timepicker:false,
     minDate:'-1970/01/02', //yesterday is minimum date
     maxDate:'+1970/01/02' //tomorrow is maximum date
});

Output:

allow particular Times options with TimePicker Example

//allow particular Times options with TimePicker Example
$('#datetimepicker4').datetimepicker({
    datepicker:false,
    allowTimes:[
      '11:00', '13:00', '15:00',
      '16:00', '18:00', '19:00', '20:00'
    ]
});

Download Code File

10 Comments
  1. taoufiq says

    nice plugin, but we need a documentation to know how using variables, like hide the datetimepicker after selecting a date, how ton make a min date and max….
    i ‘am a web developper and i need this plugin.
    thank you.

  2. Arun Km says

    Hi,
    Nice plug in. How to achieve localization for month, day display.
    Thank you

  3. Arun Km says

    Hi,
    How to achieve localization for month, day display.
    Thank you

    1. Vermouth says

      $.datetimepicker.setLocale(‘zh’);
      $(‘#modifySemesterStartTime’).datetimepicker({
      timepicker: true,
      format: ‘Y-m-d h:i:s’,
      theme: ‘dark’
      });

  4. Muhammad Shahid Ali Ali says

    excellent post, keep up the good work bro

  5. Nicole says

    Thank you

  6. RAGHAV says

    How we can change end date value should be greater then start date,if change start date 2020-01-30 15:00 then we can not keep end date 2020-01-30 14:00

  7. ThatMan Mo says

    Awesome work, love the pugin

  8. Naresh says

    Nice plugin

  9. Mayur Joshi says

    how can i also choose minutes also directly from the calander. for example 2020-12-03 1:00 i choose from calander but if i know the exact time with minutes like 2020-10-03 1:05 how can i do that instead of choosing 1:00 and then editing mnitues in text control

Leave A Reply

Your email address will not be published.

January
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
January
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
January
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
January
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
11:00
13:00
15:00
16:00
18:00
19:00
20:00