CODEWITHSUNDEEP
javascriptjqueryhtmldatepickerreturn-value
Ramirez
Ramirez

Reputation: 193

jQuery datepicker not showing time input value

I am currently working on a website which contains a datepicker in combination with date & time. For the time indicator I have used the "jquery datepicker addon". The problem is however, the datepickers doesn't update his value of the hour/time input. So when you pick a date, the date input updates and shows the value of the datepicker (inspect element) but not of the times input. You can see this by inspecting the code.

See printscreen: http://nl.tinypic.com/r/35816jb/8

The HTML code:

<p>Date: <input type="text" name="datumtijd-aanduiding" id="datumtijd-aanduiding" value=""/> On: <input type="text" name="datumtijd-aanduiding-tijd" id="datumtijd-aanduiding-tijd" value=""/></p>

The JS code so far:

$( document ).ready(function() {

$("#datumtijd-aanduiding").datepicker({
        dateFormat: "DD, d MM yy",
        onSelect: function (dateText, instance) {
            $('#datumtijd-aanduiding').text(this.value);

            var date = $.datepicker.parseDate("DD, d MM yy", dateText);
            var isWeekendHours = !$.datepicker.noWeekends(date)[0];
            if (isWeekendHours) {
                $("#datumtijd-aanduiding-tijd").removeClass("hasDatepicker");
                $("#datumtijd-aanduiding-tijd").timepicker({
                    hourMin: 12,
                    hourMax: 17,
                    stepMinute: 5,
                    timeOnly: true,
                    timeFormat: "HH:mm"
                });
            } else {
                $("#datumtijd-aanduiding-tijd").removeClass("hasDatepicker");
                $("#datumtijd-aanduiding-tijd").timepicker({
                    hourMin: 8,
                    hourMax: 22,
                    stepMinute: 5,
                    timeOnly: true,
                    timeFormat: "HH:mm"
                });
            }
        },
        //set options
        minDate: 0,
        numberOfMonths: 1,
        showButtonPanel: true,
        changeMonth: true,
        changeYear: false,
        selectWeek: true
    }).datepicker("setDate", "0");

 });

And the working jsfiddle link: http://goo.gl/G6bK9I

Upvotes: 0

Views: 3410

Answers (1)

Andy Torkington
Andy Torkington

Reputation: 31

I had same issue with daterangepicker

I used

$('#startDate').daterangepicker({
    singleDatePicker: true,
    timePicker: true,
    locale: {
        format: 'MM/DD/YYYY h:mm A'
    }
});

Upvotes: 3

Related Questions