DateTime picker

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. 

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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