Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1168
  • Last Modified:

How to extract user defined date range values using JQRangeSlider?

I am using the JQRangeSlider's dateRangeSlider to allow a user to select a date range.

I need to record the values of the dateRangeSlider for use in my HTML form.

The dateRangeSlider works perfectly.

//BUILD RANGE SLIDER
$("#slider").dateRangeSlider(
	{					
		bounds: {
			min: new Date(2013, 0, 1), 
			max: new Date(2014, 6, 29)
		},
		defaultValues: {
			min: new Date(2014, 3, 29), 
			max: new Date(2014, 6, 29)
		},
		symmetricPositionning: true,
		range: {min: 0},
		formatter:function(val){
			var month = val.getMonth() + 1,
			days = val.getDate(),
			year = val.getFullYear();
			return month + "-" + days + "-" + year;
		}
	}
);

Open in new window


The JQRangeSlider site says to use the following code to extract the minimum and maximum date as defined on the slider.

var dateValues = $("#slider").dateRangeSlider("values");
console.log(dateValues.min.toString() + " " + dateValues.max.toString());

Open in new window


I am having trouble retrieving the minimum and maximum values for use in my form.

Can anyone suggest a solution?

(My form validation code)
function validate(){
//THIS FUNCTION ENSURES THAT THE PROJECT_STATE AND AT LEAST ONE OTHER FIELD ARE SELECTED
	var error=0;
	var a=document.forms["sort"]["project_state"].value;
	if ((a==null || a=="")){
		error=1;
		alert("\"Project State\" is a required field.\n\nPlease select a Project State to continue.");
		return false;
	}//END IF				
	if(error==0){
		document.getElementById("sort").submit();						
	}//END IF
}//END VALIDATE FUNCTION

Open in new window


Thanks.
0
evibesmusic
Asked:
evibesmusic
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
What about :
var dateValues = $("#slider").dateRangeSlider("values");
var minDate = dateValues.min.toString();
var maxDate = dateValues.max.toString();
$("#hiddenFieldMin").val( min );
$("#hiddenFieldMax").val( max );

Open in new window


<input type="hidden" id="hiddenFieldMin" name="hiddenFieldMin" />
<input type="hidden" id="hiddenFieldMax" name="hiddenFieldMax" />

Open in new window

0
 
evibesmusicAuthor Commented:
@leakim971

Perfect. Works like a charm. Have a great day.
0
 
evibesmusicAuthor Commented:
@All:

Here is the final code:

var dateValues = $("#slider").dateRangeSlider("values");
var minDate = dateValues.min.toString();
var maxDate = dateValues.max.toString();
$("#hiddenFieldMin").val( minDate );
$("#hiddenFieldMax").val( maxDate );

Changed:
$("#hiddenFieldMin").val( min );
$("#hiddenFieldMax").val( max );

To:
$("#hiddenFieldMin").val( minDate );
$("#hiddenFieldMax").val( maxDate );
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now