Opening second datepicker after selecting date - javascript

I have two datepicker inputs and I'm trying to automatically open the second one after a date is selected in the first. As of now, the datebox opens and then promptly closes. I can do it just fine outside of my knockout.js viewmodel without the datebox closing, but the problem is I want the second datebox to open only if the first one has a valid date.
This works just fine outside of my viewmodel, as I mentioned above, however it doesn't account for any errors with the start date.
$("#start_date_input").datepicker('option',"onClose", function() {
$( "#start_date_input" ).datepicker( "show" );
});
This is where I'd like the second datepicker to be triggered
self.startDate.subscribe(function(){
var startDateErrors = ko.validation.group(self.startDateValidation);
var endDateErrors = ko.validation.group(self.endDateValidation);
if(startDateErrors().length == 0 && endDateErrors().length == 0){
populateList();
}
else if(startDateErrors().length == 0){ //if a valid start date is selected, show the end date
$("#end_date_input").datepicker("show");
}
});
As soon as I select a start date, the end date picker shows and immediately disappears. The cursor is still in the end date input box and flashing. Any idea what is causing it to close?
I tried adding $("end_date_input").datepicker({autoclose: false}); but that didn't do anything.

Don't reach around the viewmodel and fiddle with the DOM directly. You need a custom binding handler for datepicker. There is one here that seems pretty popular. That by itself probably won't solve your problem, but it will put you in a better place to be in control of what's going on.
I suspect (but don't know) that having a hasFocus binding on the associated input field will show the datepicker properly.

Related

Textbox disabled automatically after postback

In a ASP.NET form there are two textbox controls. One control set today's date and another control initially disabled. Based on date enable the control (disabled property). If date is current date, disable the textbox, else enable the control. It worked well.
Now the date is not today and text box is enabled. But when click the button, the form is posted back and the text box is disabled again. I didn't set enable/disable setting in any other places in javascript and code behind. I am not sure why this is happening.
if (condition)
{
$('#txt').prop('disabled', true); }
else
{
$('#txt').prop('disabled', false);
}
If anyone faced this kind of issue and any solution available, please help me to resolve this.
Well, if there is a post-back, then why not set the enable with code behind?
eg:
DateTime dtToday = DateTime.Today;
if (TextBox1.Text == dtToday.ToShortDateString())
TextBox2.Enabled = false;
else
TextBox2.Enabled = true;
So, above in the on-load of the page should work rather well.
Now I like client side code (js), but if a post back is going to occur here, then might as well run code behind to manage this.

rome.js knowing when the user is finished

I am using rome.js for a date picker. When the user is finished enter the date, I need the date picker to go away and be replaced on the page by text showing the date. The problem is, I'm not sure how to tell when the user is done picking the date. I don't really want to have to add another control for them to put away the date picker, but would like to infer this from the user's actions.
One thought I had was to look for the hide event - when coupled with autoHideOnClick and autoHideOnBlur I thought I could tell that the user had entered a new date and was done. However, what I find is that I immediately get this event as soon as the picker is created - even if the input element has focus when I create the picker, the picker doesn't pop up immediately. In addition, the hide event sometimes happens even when the user is still enter the date, such as if they enter the date and then want to still enter the time manually.
I had similar issues with the blur event on the input element I create - for instance it fires when the picker is opened.
How am I supposed to know when the user has finished enter the date/time?
I think you could add a keydown event handler to the date input and on each keydown stroke, validate the date and if it's valid one change the display property of the date-picker (class name is rd-container) to "none".
Here is the pseudo code. I verfied on https://www.cssscript.com/demo/highly-customizable-date-and-time-picker-with-rome-js/
dateInput.onkeydown = function () {
if(dateInput.text is valid) { //validate the date here.
$(".rd-container").css("display","none");
}
}
you can use the same function to detect if user "pastes" date text into your input element by listening to "onpaste" event.
dateInput.onpaste = function () {
if(dateInput.text is valid) { //validate the date here.
$(".rd-container").css("display","none");
}
}

Jquery. Detect changes on input type 'date'

on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.
I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.
I cannot correctly detect the input or change.
$('#mob-gig-date-gteq').blur(function() {
var date = $("#mob-gig-date-gteq").val();
console.log(date)
$(this).closest("form").submit();
});
(Using .change yields the same results)
If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires.
On mobile nothing happens at all.
How can I detect the input change on a date field?
Thanks.
Try the jquery .change method. Blur will only fire when the input loses focus.
$('#mob-gig-date-gteq').change(function() {
var date = $(this).val();
console.log(date, 'change')
});
Code pen tested in chrome

Setting up a callback for the DatetimepickerBundle

I use the DatetimepickerBundle in my Symfony project. In one form I have two date fields, start and end. I want the end field to update automatically when the start field is changed, so the user doesn't have to select the date again, since most events will have their start and end on the same day.
The Bundle is based on the bootstrap-datetimepicker by smalot and generates the following javascript for each field:
jQuery(document).ready(function($) {
$field = $('#app_bundle_event_start');
$field.datetimepicker({"formatter":"js","format":"dd.mm.yyyy hh:ii","autoclose":true,"language":"de"});
});
I added the following code in the template, but it doesn't do anything.
jQuery(document).ready(function($) {
$('#app_bundle_event_start').datetimepicker().on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
}
If I don't wrap it in the document-ready callback, the end-date is updated, but on the start-date field the datetimepicker is re-initialized and loses all its options.
How can I add this event callback to an already initialized datetimepicker?
I believe, although I am not 100% sure, that .on() actually belongs to standard jQuery event. Basically, you do not need to call datepicker() again.
So, to attach callback to already initialized Datepicker just do:
$('#app_bundle_event_start').on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
Is this what you wanted to achieve?

Why does jQuery Datepicker select today's date when numbers are entered and enter is pressed?

I have discovered a scenario in an app I'm working on that is replicated on the jQuery site. For example, if you go here and enter a string of integers (e.g. "12345678") and hit enter, you'll see that the current date then fills the input. If you then retype another string of numbers and hit enter again, your typed string remains.
In my application I need whatever numbers are typed to remain after ANY enter key press. My questions are:
Why is the string overwritten with a date on the initial enter key press event?
How can this behaviour be prevented?
The Enter key will always grab the selected date and output this value to the textbox. This selected date will be the default date when it is opened. You can set the defaultDate when opening the datepicker, but it will either be a valid date or today's date. There is no way currently to open a datepicker with no defaultDate out of the box.
Normally, you can remove the selected date by setting it to null.
$('#mydate').datepicker('setDate', null);
But this won't work when the datepicker is initially opened, since it ALWAYS opens with a default/selected date.
I've come up with a fiddle showing a possible work around.
/***
Since there is ALWAYS a default date in the datepicker when it's opened,
then let's try and trigger an event after it has been opened, then set the
date to null.
***/
$('#textbox').datepicker(
{
beforeShow: function()
{
$(this).trigger('afterShow');
}
})
.bind('afterShow', function()
{
var $this = $(this);
setTimeout(function()
{
$this.datepicker('setDate', null);
}, 100);
});

Categories