I Uploaded a JQ_UI.zip file. Structure shown below:
JQ_UI.zip
- jquery-ui.min.js
-jquery.ui.js
-jquery-ui.min.css
Aura component:
<ltng:require
scripts="{!join(',',
$Resource.JQ_UI+ '/JQ_UI/jquery-ui.min.js',
$Resource.JQ_UI+ '/JQ_UI/jquery-ui.js')}"
styles="{! $Resource.JQ_UI + '/JQ_UI/jquery-ui.min.css'}"
afterScriptsLoaded="{!c.loadJquery}" />
<p>
<label for="amount" class="text" >Date range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
</p>
<div id="slider-range"></div>
Controller:
({
loadJquery : function(component, event, helper) {
jQuery("document").ready(function(){
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2014.01.01').getTime() / 1000,
step: 86400,
values: [ new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000 ],
slide: function( event, ui ) {
$( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
}
});
$( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
" - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());
});
});
}
})
I actually want to make a date range slider using a jquery.ui plugin. But, it's not working out I don't know what is wrong with the code above. Can anyone help ?
Thanks