Two datetimepickers: set minDate on one, changes val of the other. about jquery-timepicker-addon

[jhuttner]

Just tried the 0.9.2 dev. Still no dice. Here is some pseudocode to reproduce:

//bind somewhere
$("#start").datetimepicker{(
   onSelect: function(dateText, inst){
      $("#end").datetimepicker('option', 'minDate', dateText);
   }
});

$("#end").datetimepicker{(
   onSelect: function(dateText, inst){
      $("#start").datetimepicker('option', 'maxDate', dateText);
   }
});

When a date in #one is selected, the actual input value of #two is changing. I.e. the value in the input box. All that should change is the minimum date of the input.

Let me know if this doesn't clarify things, Trent.

-Joseph

[trentrichardson]

I recently committed a 0.9.2 dev, can you try this one? there have been some changes in this area, including if there were more than one datetimepicker on the page.

[jhuttner]

Just tried it. Problem persists.

[trentrichardson]

Ok, back to the drawing board... I'll dig some more

[jhuttner]

Ok. Let me know how I can help, buddy.

[trentrichardson]

Can you pull again from the dev branch? I'm unable to replicate it but I've made calling datepicker methods a little more strict on which input it's working on.

[zraly]

I use this example http://jqueryui.com/demos/datepicker/#date-range for date time range and with this last dev version it works!

But, this example uses utility $.datepicker.parseDate() and for Timepicker I need utility, that parses time too. Could you add this utility to Timepicker? Something like $.datetimepicker.parseTime()?

Thanks! You are doing great job here. Regards from Czech Republic.

[jhuttner]

Medhi, the example you've provided is for the min number of months to show. What I want is the ability to set the minimum (and maximum) date that can be selected in the widget. These two things are distinct.

http://jqueryui.com/demos/datepicker/#min-max

[zraly]

jhuttner: No, the example is for setting minimum date that can be selected. And it works now with Timepicker, which is great, but only with date. For Timepicker, I need option minDateTime to set minimum date and TIME that can be selected.

[jhuttner]

You should create another issue then, as these two requests are separate. One request per issue.

[trentrichardson]

Medhi,

There should be functions built into the timepicker instance to do this (if I understand correctly). The Timepicker object has a function called _parseTime, however you must have the timepicker instance.

Where can you find the timepicker instance? It is a property of the datepicker instance. That example retrieves the datepicker instance with this:

instance = $( this ).data( "datepicker" );

Now to get the timepicker instance (this is not a "proper" way) you take that datepicker instance and use it like this:

tp_inst = $.datepicker._get(instance, 'timepicker');

Now you have the timepicker instance. You can call _parseTime(timeString)..

tp_inst._parseTime(timeString);

This does nothing however but assign the properies of timepicker the new times, to make it update the input field you may need to call _updateDateTime()

tp_inst._updateDateTime(instance); // instance = datepicker instance

[trentrichardson]

Medhi, After re-reading your comment I do understand what you are requesting (jhuttner may be correct to add a new issue). You need to extend minDate and maxDate to have a similar minDateTime/maxDateTime.

I see what you mean though as far as answering jhuttner's question, this example does infact use the min/maxDate methods, and you report this does function properly.

[jhuttner]

Hey Trent, Seeing as how you said you couldn't reproduce, I thought I'd make your life (a bit) easier and put a page together. This is pointing at the latest dev version (as you see in the source). Let me know how else I can help.

https://gist.github.com/742117

-Joseph

[jmthomas]

I'm having similar issues. I think I traced it down to how the user interacts with the widget. If the user ONLY selects the date everything works fine. Once you start moving the time sliders it's as if the onSelect function doesn't get called or gets called with bad data because at that point the min and max dates get lost and the date picker acts as if they have never been set.

[jhuttner]

This issue is not fixed despite the commit message on 12/22:

Fixed !!date issue and can use only minDate or minDateTime as options
c00fa6d

[fvp]

Hi all,

I am too having the same issue, could someone please post a working script with the time date range working correctly? ps: I tried with the lastest version 0.9.3

Thanks
Felipe

[roker002]

Hey Guys... if you try to use onSelect to change the min/max Date of the second datetimepicker, you will notice that after changing the time value of the first dtp you will get shown the second dtp instead of first... this is weird "bug". However i bypassed the problem. Do not change the min/max Date of the second datetimepicker... just put new date into global var. Before you call the second dtp just put a event on beforeShow... override there the new min/max Date.

something like this

var time = new Date();
var time_prefs_start = {
//showSecond: true,
timeFormat: 'hh:mm:ss'
,changeMonth: true
,changeYear: true
,stepMinute: 15
,stepSecond: 60
,dateFormat:'yy.mm.dd'
,autoSize: true
,showWeek: true
,onSelect: function(dateText)
{
time = new Date($(this).datetimepicker('getDate').getTime());
}
};
var time_prefs_end = {
//showSecond: true,
timeFormat: 'hh:mm:ss'
,changeMonth: true
,changeYear: true
,stepMinute: 15
,stepSecond: 60
,dateFormat:'yy.mm.dd'
,autoSize: true
,showWeek: true
,hideIfNoPrevNext: true
,beforeShow: function()
{
$('input[name="inp_end_time"]').datetimepicker("option", {minDate: time, minDateTime: time});
}
};
$('input[name="inp_start_time"]').datetimepicker(time_prefs_start);
$('input[name="inp_end_time"]').datetimepicker(time_prefs_end);

But I still have the Problem of changing the hours, minutes and seconds...
With minDateTime it should work, but it DOES NOT!

I tried to override the _limitMinMaxDateTime function that contains the Problem but i failed.
However, i guess the problem ist about the _defaults object... Min Max work with hours and minutes if you initialize datetimepicker with that parameters. If you try to change the params, so you will fail to change time (changing min max date works fine) of your second datetimepicker. If i could have a good debugger for JS, i could solve the problem by myself :P

[roker002]

Finaly i bypassed the problem...

if you like, you can backtrace the source of the properties with instance.toSource().

if you do this. you can get very usefull information.

OK About bypassing.
First that you have todo... to change my code above from
beforeShow: function()
to
beforeShow:function(input, inst)

inside, write:

{

inst.settings.timepicker._defaults.hourMin = time.getHours();

}

hehe... reload your page and enjoy the correct data view :P
the same methode for minutesMin
well bypassing the problem will not solve it! Anyway... i hope it will be solved soon.

Thanks

EDIT:

one more thing... you need to change the Sourcecode of the addon, to get always correct output.
if you set the minDate, your time will be overridden by second show Up.... so to prevent it, override the sourcecode at the row 483 with

//########################################################################
// This function tries to limit the ability to go outside the
// min/max date range
//########################################################################
_limitMinMaxDateTime: function(dp_inst, adjustSliders){
var o = this._defaults,
dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay, this.hour, this.minute, this.second, 0),

[thmo]

Same problem here, with latest version from git. This is not restricted to minDate. If you do anything with the "other" dtp in the onSelect method, things will go wrong.

[roker002]

yeah, i just noticed after changing date twice... maybe it will work, if you destroy the datetimepicker and create it as new instance. I guess its the last option...

recreate the datetimepicker should be always on focus... my example is not complete...

var time_prefs_start = {
//showSecond: true,
timeFormat: 'hh:mm:ss'
,changeMonth: true
,changeYear: true
,stepMinute: 15
,stepSecond: 60
,dateFormat:'yy.mm.dd'
,autoSize: true
,showWeek: true
,minDateTime:null
,onSelect: function(dateText, inst)
{
if(this.name.indexOf("end") == -1)
{
$('input[name="inp_end_time"]').datetimepicker("destroy");
var time = new Date($(this).datetimepicker('getDate').getTime());
time_prefs_end.minDate = time;
time_prefs_end.minDateTime = time;
$('input[name="inp_end_time"]').datetimepicker(time_prefs_end);
}
}
};
var time_prefs_end = {
timeFormat: 'hh:mm:ss'
,changeMonth: true
,changeYear: true
,stepMinute: 15
,stepSecond: 60
,dateFormat:'yy.mm.dd'
,autoSize: true
,showWeek: true
,hideIfNoPrevNext: true
,minDate: null
,minDateTime:null
};
var dates = $('input[name="inp_start_time"], input[name="inp_end_time"]').datetimepicker(time_prefs_start);

[jmthomas]

I just pulled from dev (0.9.4) and it looks like the onSelect function still has serious problems. Thanks to roker002 I discovered the beforeShow function. This has basically solved my problems as the date works correctly (I still have time issues):

var startdate = $("#startdate").datetimepicker({
  // declare options
  beforeShow: function(){
    $("#startdate").datetimepicker("option", {
      maxDate: $("#enddate").datetimepicker('getDate')
    });
  }
});
var enddate = $("#enddate").datetimepicker({
  // declare options
  beforeShow: function(){
    $("#enddate").datetimepicker("option", {
      minDate: $("#startdate").datetimepicker('getDate')
    });
  }
});