Solved

How to extract user defined date range values using JQRangeSlider?

Posted on 2014-07-29
3
963 Views
Last Modified: 2014-08-05
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
Comment
Question by:evibesmusic
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40230137
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
 

Author Closing Comment

by:evibesmusic
ID: 40241807
@leakim971

Perfect. Works like a charm. Have a great day.
0
 

Author Comment

by:evibesmusic
ID: 40242090
@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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now