Bootstrap DatePicker - Validate Date - javascript

I have a bootstrap datepicker set up such that the startDate = '1/1/1990', but if the user enters the date manually in the text box to something such as 1/1/201 (likely mistype of 1/1/2014), the date is just blanked out when they change focus. Is there a way such that if they attempt to leave the field with an invalid date that instead of having a blank field that I can specify something like today's date, or even change the background color and not allow for the user to leave that field?
Thank you for your help.

You can also set the date field to readonly, in this way user can only select correct date format from datepicker.
example:
http://www.w3schools.com/tags/att_input_readonly.asp

You can use the jquery validation plugin for the color, showing msg for the invalid date. And in that case for validating the date value with present date you have to add a custom validation method to it like :-
$.validator.addMethod("presentDate", function(value, element) {
if(new Date(value).getTime() >= new Date().getTime()){
return true;
} else {
return false;
}
});

I have figured out that I can simply detect when the value of the date has been set to '' and go from there with what I want to change:
$('#StartDate').change(function()
{
if (this.value === '')
{
alert('Start date is now set to empty string, do work here');
}
});

Related

Allow regex or other method to format mm/yyyy date format while user types on text input field

I am trying to formulate a javascript on a text input field to help user format MM/YYYY while filling out a form in real time. Must work in all browsers include IE11+. Can include just numbers so they don't have to type the '/'.
I'm trying regex, but probably date formatting is better option?
So if user types: 112002 as they are typing, it should type 11/2002.
If user types ab12000, it would ignore the ab,
and start 12/ , then ignore the 000 after that until they type valid
date input, which would be a valid 4 digit year.
So far what I have for the onChange event:
function(field, event, opts ){
var s = new String(field.value());
if(s != null && s != '')
{
if(s.length>3) // better conditional statement?
{
s = s.replace(/[^0-9]/g,''); // need more/different validation criteria here for date
if(s.length>2) // better conditional statement?
{
s = [s.slice(0,2),'/',s.slice(2,6)].join('');
}
//something here to set the value ?
}
}
}

I am trying to validate that one date is between 2 other dates using suitescript when being edited inline on a saved search

Validate inline edit on a saved search, suitescript 1.0
I have the validation working for non-inline edits when the change is made on the record itself. I am looking to get the same validation online when an edit is made on the saved search as an inline edit. I have 3 date fields, a ship, cancel, and expected date. The cancel date needs to be between the ship date and the expected date. I am using the following code. TNHelper.inRageDateCheck just returns true if the 3rd date is between the first two dates.
Edit Example
function saveRecord_Functions() {
var noProblem = true, alertmsg = '';
// EXPECTED DATE Required only in Form "TN Purchase Order"
if (nlapiGetFieldValue('customform') != 102 || type != 'xedit') return true;
var helper = new TNHelper();
if (helper.inRageDateCheck(nlapiGetFieldValue('custbody_startshipdate')
,nlapiGetFieldValue('custbody_tn_po_expecteddate')
,nlapiGetFieldValue('custbody_tn_po_canceldate'))){
noProblem = true;
}else{
alertmsg = 'Cancel Date must be between Start Ship Date and Expected Date.';
}
if(alertmsg.length>0){
alert(alertmsg);
return;
}
return noProblem;
}
I would like it to pop alertmsg when an invalid cancel date is put into the field and attempted to be saved.
This will not work on the client script save record entry point; the xedit context validation is only available for user event scripts. You can add validation with a UE script, but unfortunately you will not be able to send an alert to the user via alert(). For more information on how to do this, check out this question: Validate In-Line Edits in Netsuite

parsley.js - custom validation for date field

I have been reading the parsley.js docs and I have tried to write a custom validator to validate if a date is greater than todays date.
I have the conditional code written, but I am completly confused about how to apply the conditional error message.
I have completed the task with a parsley maxlength validator, but realise that this is less than perfect.
How do I write the custom validation with parsley?
Here is my js/jq code that dynamically adds & deletes the validation using the maxlength:
if(formattedStartDate > todaysDate) {
$('#id_voluntary_start_date').attr('data-parsley-maxlength', '1');
$('#id_voluntary_start_date').attr('data-parsley-maxlength-message', '{% trans "Commencement Date must not be greater than today." %}');
$('#id_voluntary_start_date').parsley();
} else {
$('#id_voluntary_start_date').attr('data-parsley-maxlength', '50');
}
Any help with implementing the custom validation would be appreciated.
First of all set one hidden textbox and store today's date in it and just write below code on date field you want to check.
data-parsley-dlte = "#hiddentextboxid",
data-parsley-dlte_message = "Your custom message"
Don't forget to set parsley on the form in which you have your dom elements.
If this doesn't work check the version of parsley js.
Hope this is helpful.
All you need to do is register your custom validator either globally (in window.ParsleyConfig) or for your particular form as follows:
myForm.parsley({
validators: {
custom: function (value) {
var now = new Date();
var date = new Date(value);
return date < now;
}
},
messages: {
custom: 'Commencement Date must not be greater than today'
}
});
Here is jsFiddle with a sample

Bootstrap Datepicker defaulting to sticky date

I am wondering if anybody has already coded an elegant solution whereby a blank Bootstrap Datepicker uses, by default, a previously selected date from another datepicker element within a DOM/UI (instead of defaulting to today's date with each new instance). Here is my solution so far -- which works -- using jQuery cookies:
//multiple elements with class 'DatePicker'
$('.DatePicker').datepicker({autoclose:true}).on('show',function() {
//getting cookie of last datepicker, if it exists
lastDate = $.cookie('lastDate') ? new Date($.cookie('lastDate')) : null;
//checking for blank DP and cookie combo, otherwise today is default
if ($(this).val() == '' && lastDate) {
//adding calendar day to date, as DP 'changeDate' event sets object to previous day
lastDate.setDate(lastDate.getDate()+1);
//overriding today-as-default behavior
$(this).datepicker('setDate',lastDate).datepicker('update');
}
}).on('changeDate',function(ev) {
//getting and setting cookie
selectedDate = ev.date;
$.cookie('lastDate',selectedDate);
});

Call a function as soon as date is entered via Calender

I have 2 text box readonly for Start Date and End Date. Date can only be entered through calender. Cannot be entered Manually. So I want to call a function as soon as date is entered via Calender in Start Date.
How Can I do it .
onchange and onblur events are not working as calender.js does not give any focus while inserting the date.
For IE onchangeproperty is working, but it is not working for Chrome and other browsers.
Can anyone help in this matter.
If you cannot find a reliable event - this is a hacky workaround, you can kick off a function via setInteval to check the value every xxx milliseconds to see if it has changed:
var sStartDate = document.getElementById('StartDate').value;
var iTimer = setInterval(function() {
if (document.getElementById('StartDate').value != sStartDate) {
clearInterval(iTimer);
// Do here the stuff needed to do when the date changed
}
}, 500)

Categories