Topic: Date + Time picker in a single component?

trevor pro asked 7 years ago


Hi, Is it possible to request a combined date and time picker as in the system I wish to migrate from at present I use a single component to manage the selection of the user desired date and time in one pop up process.

webmasters pro answered 7 years ago


Hi, I created my own solution for this issue and hope other users will find it helpful. My solution Use a normal input control as a 'DateTime' control. On focus display a Date and Time selector with a option to submit back to 'DateTime' control. Screenshot Sample DateTime Control Screenshot DateFormat Plugin I use the following jquery date-formatting plugin in the code sample https://github.com/phstc/jquery-dateFormat Code Snippet
    <h1 class="mb-3">Date Time Control</h1>

    
    <%-- 'DATETIME' CONTROL --%>
    <div class="md-form" id="divDateTime">
        <i class="fa fa-calendar prefix"></i>
        <input type="text" id="txtDateTime" class="form-control" value=" ">
        <label for="txtDateTime">Date Time Selector</label>
    </div>
    <%-- DATE AND TIME SELECTION CONTAINER --%>
    <div id="divDateTimeSelection" class="" style="display: none; ">
        <div class="md-form mt-1">
        <i class="fa fa-calendar prefix"></i>
            <input placeholder="Selected date" type="text" id="txtDate" class="form-control datepicker">
            <label for="txtDate">Date</label>
        </div>
        <div class="md-form">
        <i class="fa fa-clock-o prefix"></i>
            <input placeholder="Selected time" type="text" id="txtTime" class="form-control timepicker">
            <label for="txtTime">Time</label>
        </div>

        <a class="btn btn-success" onclick="SubmitDateTime()" style="width: 100%;">Submit</a>
    </div>

    <script>
        // SET DEFAULT VALUE ON-LOAD
        $('#txtDateTime').val($.format.date(new Date(), "yyyy/MM/dd HH:mm a"));

        $("#txtDateTime").focus(function () {
            // SHOW AND HIDE CONTAINERS
            $('#divDateTime').hide();
            $('#divDateTimeSelection').addClass('animated fadeIn');
            $('#divDateTimeSelection').show();

            // INIT DATE & TIME CONTROLS
            $('#txtTime').pickatime({
                twelvehour: false
            });
            $('#txtDate').pickadate({
                format: 'yyyy/mm/dd',
                formatSubmit: 'yyyy/mm/dd'
            });

            // SET CURRENT VALUES
            if ($('#txtDateTime').val() != '') {
                var CurrentValue = new Date(Date.parse($('#txtDateTime').val(), "yyyy/MM/dd HH:mm"));                
                $('#txtDate').val($.format.date(CurrentValue, "yyyy/MM/dd"));
                $('#txtTime').val($.format.date(CurrentValue, "HH:mm"));
            }
            return;
        });
        function SubmitDateTime() {
            // FORMAT THE SELECTION
            var ThisDate = new Date(Date.parse($('#txtDate').val() + ' ' + $('#txtTime').val(), "yyyy/MM/dd HH:mm"));             
            var FinalValue = $.format.date(ThisDate, "yyyy/MM/dd HH:mm a");
            // SET THE VALUE
            $('#txtDateTime').val(FinalValue);
            // SHOW AND HIDE CONTAINERS
            $('#divDateTimeSelection').hide();
            $('#divDateTime').addClass('animated fadeIn');
            $('#divDateTime').show();
        }
        

    </script>


Currently, we're not planning to create combined component. We'll think about it in the future

trevor pro answered 7 years ago


I'm trying to ask if you will create a new combined component to achieve the functional objective so the end user can select the date and time all in one smooth process.

It's impossible to combine them to use it as a single component

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No