Jquery DatePicker with custom forms

(Pomster09) #1

Hi guys

 

Just thought I'd share with you this very simply Jquery datepicker implementation. As we know the date field in Squiz isn't really that pretty, offering either select or text fields, for each of day, month, year and so on...

 

This simple little bit of code grabs the date from a datepicker populated field, and then splits it into the form fields you set up.

<script>
$(function() {
 $('#full').datepicker({
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#q8month').val(pieces[0]);
        $('#q8day').val(pieces[1]);
        $('#q8year').val(pieces[2]);
    }
});
});
</script>

<input type="hidden" name="q59826:q8show" value="dmy"/>
<input type='text' id='full' name='fulldate'>
<input type="hidden" name="q59:q8value[d]" value="" size="2" maxlength="2" id="q8day" class="form-field"/>
<input type="hidden" name="q59:q8value[m]" value="" size="2" maxlength="2" id="q8month" class="form-field"/>
<input type="hidden" name="q59:q8value[y]" value="" size="4" maxlength="4" id="q8year" class="form-field"/>
<input type="hidden" name="q59:q8value[h]" value=""/>
<input type="hidden" name="q59:q8value[i]" value=""/>
<input type="hidden" name="q59:q8value[s]" value=""/>

Hope you can find some use for it.. cheers

(Pomster09) #2

Another use I had for this code was to calculate the difference between two date fields, then I could carry out a custom task based on number of days different. My first date field is pre-populated by some code, because I wanted to calculate my number of days out from today's date. You can just let the user select the two date values.

<script>
$(function() {
    $("#notifyDate").datepicker();
    $("#notifyDate").datepicker("setDate", new Date());
});

$(function() {

$(’#completionDate’).datepicker({

onSelect: function(dateText, inst) {

var pieces = dateText.split(’/’);

$(’#q11month’).val(pieces[0]);

$(’#q11day’).val(pieces[1]);

$(’#q11year’).val(pieces[2]);


	var a = $("#notifyDate").datepicker('getDate').getTime(),
            b = $("#completionDate").datepicker('getDate').getTime(),
            c = 24*60*60*1000,
            diffDays = Math.round(Math.abs((a - b)/&#40;c&#41;));
        $("#totaldays").val(diffDays)
	
	var sp = $('#totaldays').val() | 0;
	if (sp &lt;= 5) {
	   $('#result').val("Less than 5 days");
	   showDiv('message2div');
	}
	else {
	   $('#result').val("Process and ignore unexpected situation section"); /* check the operations order */
	   showDiv('message1div');
	   hideDiv('message2ddiv');
	}

	
}



});

});


</script>


<input type='text' id='completionDate' name='completionDate'>

<input type='hidden' id='notifyDate' name='notifyDate'>
<input type='hidden' id='totaldays' name='numDays'>
<input type='hidden' id='result' name='numDays'>

<div id="message1div" style="display:none" > Some content </div>
<div id="message2div" style="display:none" > Some content </div>
(Pomster09) #3

I missed this little bit of code which you'll need if you use the showDiv/hideDiv method like the one I'v used above

function showDiv(divid) {
       document.getElementById(divid).style.display = "block";
}

function hideDiv(divid) {

document.getElementById(divid).style.display = “none”;

}
(Talk) #4

Hey mate have you tried?:

<input type="date">

Matrix dates love HTML5 date inputs too, they work nicely together. http://www.w3schools.com/html/html5_form_input_types.asp

 

And you can even:

<input type="date" min="%globals_date%">

To only allow dates from today onwards - or use a meta date if you have a certain date in mind.

(Benjamin Pearson) #5

Hey mate have you tried?:

<input type="date">
Matrix dates love HTML5 date inputs too, they work nicely together. http://www.w3schools.com/html/html5_form_input_types.asp 
And you can even:
<input type="date" min="%globals_date%">
To only allow dates from today onwards - or use a meta date if you have a certain date in mind.

Use with caution, the new HTML5 form fields are relatively new and not all browsers fully support it just yet. We often find some places still use old versions of IE and often require support for them.

Source: http://caniuse.com/#feat=input-datetime
(Talk) #6

Use with caution, the new HTML5 form fields are relatively new and not all browsers fully support it just yet. We often find some places still use old versions of IE and often require support for them.
Source: http://caniuse.com/#feat=input-datetime

 

100% agreed, I only use HTML5 inputs on my poor editors/admins - I wrap my login boxes in an IE if statement to keep out the riffraff >:D

(Pomster09) #7

Really appreciate the feedback guys. This is one of those situations where there's a need to stay clear of any HTML5. Our organisation has over 1000 workers and the IT dept will release a new ground breaking SOE (standard operating environment) at the end of this year. The new SOE will include Windows 7, and wait for it.... IE8. And we all know IE8 doesn't support all that nice stuff that can be done with HTML5. So it's going to be a very long time before I can use any goodies for work that touches so many internal stakeholders.

 

It's probably a good point for anyone developing for government departments, that they are on antiquated systems so be careful about using HTML5/CSS3. 

(Nic Hubbard) #8

The new SOE will include Windows 7, and wait for it.... IE8. And we all know IE8 doesn't support all that nice stuff that can be done with HTML5. So it's going to be a very long time before I can use any goodies for work that touches so many internal stakeholders.

 

Who makes these sort of decisions? I get frustrated and tired of IT departments being so behind times.

(Talk) #9

Very frustrating. I know exactly what you mean, a certain Vic state dept is still using XP and ie6. When I was given this setup as a development platform with no option to upgrade I couldn’t take the work seriously.

(Benjamin Pearson) #10

Sometimes they get held back due to some integration point (ie. upgrading needs a lot of development to update custom software to handle the newer browsers). So they may not be behind the times, just stuck with something that costs heaps to change.

(Nic Hubbard) #11

Sometimes they get held back due to some integration point (ie. upgrading needs a lot of development to update custom software to handle the newer browsers). So they may not be behind the times, just stuck with something that costs heaps to change.

 

True, but I think the custom software integration with old browsers that screws them.

(Talk) #12

I've had to put immense pressure on IT departments in the past to roll out updates just to keep staff within a few years of being up-to-date. I understand that certain tools/intranets are optimised (and in some cases only work in ie6), but I'd instruct anyone relying on such dated techniques to do so with caution, and not at the expense of the org's productivity. That said, has anyone tried jQuery UI date picker?

(Nic Hubbard) #13

I understand that certain tools/intranets are optimised (and in some cases only work in ie6), but I'd instruct anyone relying on such dated techniques to do so with caution, and not at the expense of the org's productivity.

 

Relying on an 11 year old browser is so uncool. I feel like crying.

(Nic Hubbard) #14

That said, has anyone tried jQuery UI date picker?

 

Yes. Did some custom Calendar Page with ajax and the date picker for our organization.

(Talk) #15

 

Yes. Did some custom Calendar Page with ajax and the date picker for our organization.

 

And all went well? I'd like to use it as fallback for HTML5 input (funny how we can now use JS as fallback!).

(Nic Hubbard) #16

 

And all went well? I'd like to use it as fallback for HTML5 input (funny how we can now use JS as fallback!).

 

Yeah, it works well. Been using it for years.

(Talk) #17

Great :)

(Pomster09) #18

That said, has anyone tried jQuery UI date picker?

 

Is the original post not an example of the jquery datepicker? I seriously thought that's what I was using...

(Talk) #19

Hey mate, yes you are using jQuery datepicker. Was just wondering if people had used it and what their experiences were (I want to use it too).

(system) #20

Very frustrating. I know exactly what you mean, a certain Vic state dept is still using XP and ie6. When I was given this setup as a development platform with no option to upgrade I couldn't take the work seriously.