CODEWITHSUNDEEP
jquerydatepickerdatetimepickertimepicker
Phill Pafford
Phill Pafford

Reputation: 85338

jQuery Datepicker and Timepicker for same input field to popup one after another

I have a Datepicker and a Timepicker in 2 separate input fields but I need to combine the 2 fields inputs into one for a database call. Wanted to know if I could only use 1 input field for both controls?

first call the datepicker and the user would click the date wanted and it would enter the value, then the timepicker would popup and append the date the user selected in the first action.

I'm using the jQuery UI Datepicker and Timepickr plug-ins

So I have something like this

<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>

But would like something like this

<input class="datetimepicker">2009-06-22 12:00:00</input>

<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( {
   dateFormat: 'yy-mm-dd',
   onClose: function(dateText, inst) {
      var tempDate = $("#datepicker").val(dateText);
      $("#datepicker").timepickr({
         onClose: function(timeText, inst) {
            var tempTime = $("#datepicker").val(dateText);  
            alert("Temp Time: '" + tempTime.val() + "'");
            $("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
         }  
      });                                   
   }
});             
</script>

Upvotes: 16

Views: 93153

Answers (6)

sakhunzai
sakhunzai

Reputation: 14490

Please checkout the link.

I have updated some layout issue and added second slider, which will be active if {showTime:true, time24h:true}

You can find the original one at Google Code.

Upvotes: 0

Bat_Programmer
Bat_Programmer

Reputation: 6851

Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.

Just bind the click event to pop it up:

$("#date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

Personally I find this much easier to follow. But obviously you have so many options with multiple jquery plugins available to do your job.

Upvotes: 1

user210158
user210158

Reputation:

I'd like to recommend Any+Time(TM), in which you can combine the date/time in a single field with a single, easy-to-use (and quick!) date/time combo picker.

Upvotes: 16

Sampson
Sampson

Reputation: 268414

You could bind an event to the onClose() event of the datepicker. Have it open up your time picker. Let the datepicker write the base value of the input, and have the timepicker append it's value following a space to the same input.

  1. Bind date-picker to input.
  2. Attach method to open timepicker to .onClose() event of date-picker.
  3. Append time-picker value (with a preceding space) to input value.

Updated: The follow is an updated resulting from an updated question.

The documentation gives a brief example on how to bind an event/action to the closing of the datepicker:

$('.selector').datepicker({
   onClose: function(dateText, inst) { ... }
});

In this example, you could use your function following "onClode: " to write the value to the input, and popup the timepicker.

$(".selector").datepicker({
  onClose: function(dateText, inst) {
    $(".selector").val(dateText);
    // Raise Timepickr
  }
});

Upvotes: 1

AlexC
AlexC

Reputation: 9661

Here's an alternative:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
});

Upvotes: 0

dhaval
dhaval

Reputation: 2388

You can try combining the inputs from both controls into one like

$("#datetime").focus(function() {
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) {
        this.value = mydate + " " + mytime;
    }
});

Upvotes: 0

Related Questions