locked
bootstrap datetime picker RRS feed

Answers

  • User1535942433 posted

    Hi zhyanadil.it@gmail.com.

    As far as I think,there are two methods to install the bootstrap package.

    1.Add the bootstrap package in Nuget.

    You could right click your application -->select Manage Nuget Packages-->in the Browse select  bootrap datepicker -->Install

    Just like this:

    2.You could install from this.

    You could download from this and copy the js file to your application folder.And then you need to drag the js file from your application folder to your solution files.

    3.Use the online link.

    How to use the package?

    1.You could drag the js file from your solution files after downloading the package.

    Note:Jquery js file must be used at the first.

    2.Add the html code in the body.

    Just like this:

    <head runat="server">
        <title></title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />--%>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>--%>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker5'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker5').datetimepicker({
                                defaultDate: "11/1/2013",
                                disabledDates: [
                                    moment("12/25/2013"),
                                    new Date(2013, 11 - 1, 21),
                                    "11/22/2013 00:53"
                                ]
                            });
                        });
                    </script>
                </div>
            </div>
    
        </form>
    </body>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 23, 2020 2:29 AM
  • User1535942433 posted

    Hi zhyanadil.it@gmail.com,

    Accroding to your description,I'm guessing that you want to auto close the datepicker after selecting the date.

    Since you don't post your codes,I suggest you could use change event and hide the datepicker.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: "11/1/2013",
    
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ],
                });
                $('#datetimepicker5').datetimepicker().on('dp.change', function (e) {
                    if (!e.oldDate || !e.date.isSame(e.oldDate, 'day')) {
                        $(this).data('DateTimePicker').hide();
                    }
                });
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker5'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
    
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 23, 2020 8:00 AM

All replies

  • User475983607 posted

    zhyanadil.it@gmail.com

    i want to get this demo 

    https://eonasdan.github.io/bootstrap-datetimepicker/#no-icon-input-field-only

    how can i get the code of that demo which is only text box with date time picker?

    Read the documentation!!!  You are also need moment.js and Bootstrap3 as explained in the installing docs.

    https://eonasdan.github.io/bootstrap-datetimepicker/Installing/

    Install-Package Bootstrap.v3.Datetimepicker
    Install-Package Bootstrap.v3.Datetimepicker.CSS
    <head>
      <script type="text/javascript" src="/scripts/jquery.min.js"></script>
      <script type="text/javascript" src="/scripts/moment.min.js"></script>
      <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
      <script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
      <!-- include your less or built css files  -->
      <!-- 
      bootstrap-datetimepicker-build.less will pull in "../bootstrap/variables.less" and "bootstrap-datetimepicker.less";
      or
      <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
      -->
    </head>




    Wednesday, July 22, 2020 4:41 PM
  • User-1634604574 posted

    i don't know how can i install this pakage 

    bower install eonasdan-bootstrap-datetimepicker#latest --save
    from install this?
    Wednesday, July 22, 2020 5:05 PM
  • User475983607 posted

    zhyanadil.it@gmail.com

    i don't know how can i install this pakage 

    bower install eonasdan-bootstrap-datetimepicker#latest --save
    from install this?

    That's a bower command.  Are you using bower?

    I assume you are using Visual Studio and NuGet for which I I provided the NuGet command line.  This information is also openly published in the link. Scroll down to find your platform.

    Also, you can simply open NuGet and do a search for the packages you need.  

    https://docs.microsoft.com/en-us/nuget/quickstart/install-and-use-a-package-in-visual-studio

    Wednesday, July 22, 2020 5:13 PM
  • User1535942433 posted

    Hi zhyanadil.it@gmail.com.

    As far as I think,there are two methods to install the bootstrap package.

    1.Add the bootstrap package in Nuget.

    You could right click your application -->select Manage Nuget Packages-->in the Browse select  bootrap datepicker -->Install

    Just like this:

    2.You could install from this.

    You could download from this and copy the js file to your application folder.And then you need to drag the js file from your application folder to your solution files.

    3.Use the online link.

    How to use the package?

    1.You could drag the js file from your solution files after downloading the package.

    Note:Jquery js file must be used at the first.

    2.Add the html code in the body.

    Just like this:

    <head runat="server">
        <title></title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />--%>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>--%>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker5'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker5').datetimepicker({
                                defaultDate: "11/1/2013",
                                disabledDates: [
                                    moment("12/25/2013"),
                                    new Date(2013, 11 - 1, 21),
                                    "11/22/2013 00:53"
                                ]
                            });
                        });
                    </script>
                </div>
            </div>
    
        </form>
    </body>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 23, 2020 2:29 AM
  • User-1634604574 posted

    now i want to use auto close true this code gave me errro

    autoclose:true
    Thursday, July 23, 2020 6:40 AM
  • User1535942433 posted

    Hi zhyanadil.it@gmail.com,

    Accroding to your description,I'm guessing that you want to auto close the datepicker after selecting the date.

    Since you don't post your codes,I suggest you could use change event and hide the datepicker.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: "11/1/2013",
    
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ],
                });
                $('#datetimepicker5').datetimepicker().on('dp.change', function (e) {
                    if (!e.oldDate || !e.date.isSame(e.oldDate, 'day')) {
                        $(this).data('DateTimePicker').hide();
                    }
                });
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker5'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
    
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 23, 2020 8:00 AM
  • User-1634604574 posted

    can you create a custom set button inside popup datetime picker to hide the datetimepicker popup?

    Thursday, July 23, 2020 8:46 AM