Is there a way, to select weekly on daterangepicker?
E.g if I select December 5 it will select the whole week.
I tried to search for the answer and i found nothing
if anyone can help much appreciated
You may create additional field for selection day of week and then you can use value of the field in the isInvalidDate function. You also can point common parent element across parentEl property and from this get access for the field
$(document).ready(function () {
$('#daterangepicker').daterangepicker({
parentEl: '.row',
isInvalidDate: function(date) {
return parseInt($(this.container).parent().find('select').val()) !== new Date(date).getDay();
}
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="row">
<input id="daterangepicker" type="text" />
<select>
<option value="1">Mo</option>
<option value="2">Tu</option>
<option value="3">We</option>
<option value="4">Th</option>
<option value="5">Fr</option>
<option value="6">Sa</option>
<option value="0">Su</option>
</select>
</div>
Related
I tried a simple datepicker in my codeigniter page but somehow it's not showing datepicker.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
my html code is,
<input type="text" placeholder="Pickup Date" id="datepicker" name="datepicker" class="formfield_text hasDatepicker">
Try this as your html code,
<input type="text" placeholder="Pickup Date" id="datepicker" name="datepicker" class="formfield_text">
This works. The problem is that you can not use class hasDatepicker. Remove it and try.
I use Chosen jquery plugin and I noticed that max_selected_options is not working:
The code is this:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>
<select id="assets" data-placeholder="Choose assets" class="chzn-select" multiple style="width:350px;" tabindex="4">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$('.chzn-select').chosen({ max_selected_options: 3 });
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
$(".chzn-select").chosen().change( function () { alert("a"); } );
});
</script>
</body>
</html>
I don't understand what is incorrect to my code. This line:
$('.chzn-select').chosen({ max_selected_options: 3 });
should limit the maximum number of allowed selections. But it doesn't work. I still can select any number of items.
I noticed that also the event that should be fired on the case the maximum number of selected items is reached doesn't fire:
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
Do I have any error in code?
And one more question: how can I add search functionality to my list, like the search box that appears on the first example on the plugins page?
Thanks.
You call twice the chosen() method, which is why you get problems:
$(".chzn-select").chosen();
$('.chzn-select').chosen({ max_selected_options: 3 });
Remove the first one and it works. Your JS code should be:
$(document).ready(function(){
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(".chzn-select").chosen({ max_selected_options: 3 });
$(".chzn-select").bind("chosen:maxselected", function () { alert("max elements selected"); });
$(".chzn-select").chosen().change( function () { alert("change"); } );
});
i use jquery-ajax and have three file.
my file is :
jquery-1.8.3.min.js
index.html
res.html
jquery-1.8.3.min.js file is main of jquery file.
index.html code is :
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
});
$(document).ready(function(){
$('#state_id').change(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<div id="responsediv">
</div>
</body>
</html>
and res.html code is :
<select id="state_id" name="state_id">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
<option value="4">forth</option>
</select>
i don't know why this code not runnig.
$(document).ready(function(){
$('#state_id').change(function(){
alert($(this).val());
});
});
this is sample and simple code . i check this on another project and face this problem.
thanks.
I think this should be here:
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
$(document).on('change', '#country_id', function(){
alert($(this).val());
});
});
</script>
note:
you don't need two doc ready handlers.
try this and see if this helps.
There doesn't seem to be an element in your html that $('#country_id') would reference.
You are missing the select box for countries in your HTML. Try modifying as follows:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
$('#country_id').change(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<select id="country_id">
<option value="0">Select Country...</option>
<option value="1">Country One</option>
<option value="2">Country Two</option>
</select>
<div id="responsediv">
</div>
</body>
</html>
I have a (multiple) select in my JQM page.
I need to force option with value 'A' de-selection on any other option selection.
HTML is like this:
<select name="select-1" id="select-1" multiple="multiple" data-native-menu="false" />
<option value='A'>a</option>
<option value='B'>b</option>
<option value='C'>c</option>
</select>
I'm using some code like this, with no success... :-(
$("select#select-1").change(function() {
$("select#select-1").val('A').attr("selected", false).trigger("refresh");
});
It looks like the option I'm trying to de-select is selected, and all others are de-selected (excluded the current one) ... :-(
A jsfiddle is here.
I played around a little bit with your problem and assuming I did not misunderstand your problem (see comments), this snippets works (however probably there are simpler solutions...)
If option with value='B' is selected, then option with value='A' will be deselected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>if B selected, deselect A</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- if B selected, deselect A -->
<div data-role="page">
<div data-role="content">
<select name="select-1" id="select-1" multiple="multiple" data-native-menu="false" />
<option id="option-A" value='A'>a</option>
<option id="option-B" value='B'>b</option>
<option id="option-C" value='C'>c</option>
</select>
</div><!-- /content -->
</div><!-- /page -->
<script>
$("#select-1").change(function() {
var mySelection = $(this).val();
if (mySelection !== null) {
if (mySelection.indexOf('B') >= 0) {
$("#option-A").attr("selected", false);
$('#select-1').selectmenu('refresh');
};
};
});
</script>
</body>
</html>
EDIT updated now with $('#select-1').selectmenu('refresh'); and it now also works in the jsfiddle
Using Firefox 3.5.7
The following test page should behave like Opera, Safari and Chrome.
Key presses (arrows or 1-5) should have no effect (i.e. The events should be cancelled so that the number never changes from the initial default "3").
[I have separate working code for IE too].
Many thanks to anyone who can make it work?
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt)
{evt.preventDefault();
evt.stopPropagation();
};
</script>
</head>
<body>
<select onkeydown='stop(event);' onkeypress='stop(event);'>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>
This works for me (looks pretty evil, I haven't found any other solution on FF so far):
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt) {
evt.preventDefault();
var elem = document.getElementById('mysel');
elem.blur();
setTimeout('refocus()', 0);
};
function refocus() {
document.getElementById('mysel').focus();
}
</script>
</head>
<body>
<select id="mysel" onkeydown="stop(event);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
#icktofay: This is a simplified test page demonstrating the problem. What I am actually doing in the main code is replacing the select-box's intrinsic keystroke handling with explicit actions.
#boxofrats: Yes, that is evil... but effective. Thanks.