locked
DateTime picker RRS feed

  • Question

  • User-614943948 posted

    I am using this code snippet for date and time picker. 

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                var date = new Date();
                var currentMonth = date.getMonth();
                var currentDate = date.getDate();
                var currentYear = date.getFullYear();
                $('#txtDateOfReciept').datepicker({
                    format: 'DD/MM/YYYY HH:mm:ss',
                    maxDate: new Date(currentYear, currentMonth, currentDate)
                });
            });
        </script>

    I want the date and time to be displayed in the form of DD/MM/YYYY in the textbox. But after adding this line

    format: 'DD/MM/YYYY HH:mm:ss',

    It didn't work. 

    Tuesday, August 25, 2020 12:28 PM

Answers

  • User1535942433 posted

    Hi maverick786us,

    As far as I think,you must follow the dateformat character format.

    For jquery datepicker following code must be used:-

    Just like this:

     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $("#datepicker").datepicker({
    dateFormat: 'dd/mm/y',
    maxDate: new Date(currentYear, currentMonth, currentDate)
    }); }); </script> <p>Date:<asp:TextBox ID="datepicker" runat="server"></asp:TextBox></p>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 27, 2020 6:19 AM

All replies

  • User-474980206 posted

    you ned to pick a valid format:

       https://api.jqueryui.com/datepicker/#utility-formatDate

    as the date picker does not support time, there is no support for hours, minutes and seconds.

    Tuesday, August 25, 2020 5:01 PM
  • User1535942433 posted

    Hi maverick786us,

    Accroding to your description and codes,I'm guessing that you need to show date and time.However,datepicker cann't support time.So I suggest you could use datetimepicker.

    More details,you could refer to below codes:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    
      <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>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>
        </div>
    </div>

    Result:

    More details,you could refer to below article:

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

    Best regards,

    Yijing Sun

    Wednesday, August 26, 2020 2:04 AM
  • User-614943948 posted

    Sorry if I was unable to address my issue properly. I don't want to show time. I want the date to be displayed in the form of DD/MM/YYYY in the asp:textbox that is using this datetime picker.

    Right now Its showing in MM/DD/YYYY format

    Wednesday, August 26, 2020 10:27 AM
  • User-614943948 posted

    I tried one of those code examples 

        <script type="text/javascript">
            $(function () {
                //var date = new Date();
                //var currentMonth = date.getMonth();
                //var currentDate = date.getDate();
                //var currentYear = date.getFullYear();
                $('#txtComplianceDate').datepicker({
                    locale: 'ru'
                });
                //return currentDate + '-' + currentMonth + '-' + currentYear;
            });
        </script>

    Still this is the result. In the text box it shows month first followed by day and year

    Wednesday, August 26, 2020 12:09 PM
  • User1535942433 posted

    Hi maverick786us,

    As far as I think,you must follow the dateformat character format.

    For jquery datepicker following code must be used:-

    Just like this:

     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $("#datepicker").datepicker({
    dateFormat: 'dd/mm/y',
    maxDate: new Date(currentYear, currentMonth, currentDate)
    }); }); </script> <p>Date:<asp:TextBox ID="datepicker" runat="server"></asp:TextBox></p>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 27, 2020 6:19 AM