How to show multiple months in bootstrap-datepicker - javascript

How to show two months in a single view of bootstrap-datepicker. Please find the sample code from the following link.
JSFiddle Link
$("#datepicker").datepicker();

Please take a look to the following links :
https://github.com/dangrossman/bootstrap-daterangepicker
http://www.codestore.net/store.nsf/unid/BLOG-20130906-0309
hope this is helps

This will show two months in a single view :
<script>
$( function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2
});
} );
</script>
<p>Date: <input type="text" id="datepicker"></p>

Related

How to integrate the Bootstrap datepicker

I am currently trying to integrate the bootstrap datepicker, but for some reason it is not working at all. The datepicker is simply not showing like it should.
I have created a jsfiddle here: http://jsfiddle.net/4hmuff8x/
It contains the js code of both the datepicker and bootstrap as well as the css for these.
To explain what I am doing, the following html code is the input where I want the datepicker:
<div class="col-md-10 col-md-offset-1 spacer-below-20">
<label>The date</label>
<div class="input-group">
<input class="datepicker" type="text" name="date">
</div>
</div>
Of course I have written a bit of js, which should "link" the input tag to the datepicker:
<script>
$(function(){
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
});
</script>
I really can't figure out why it is not working. I hope some of you can help me out.
Any help will be greatly appreciated.
In the given fiddle , you are calling the below function before loading the js file into DOM.
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
call the script after loading the script or on
$(document).ready(function(){
//code to call
})
https://jsfiddle.net/santoshj/4hmuff8x/2/

Select date range in one calendar

I really like plugin daterangepicker, but it uses 2 calendars for selecting a date range.
Is it possible to select a date range with only 1 calendar? do you know other plugins?
I want to make something like that
You can refer the below link. It might help you.
http://www.daterangepicker.com/
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
You can use the singleDatePicker on the calendar configuration, and set it true.
singleDatePicker: true,
http://www.daterangepicker.com/#example3

PHP + jQuery: Apply datepicker to inputs with specific pattern

I have a big form with at least 5 input date forms.
For example:
<input type="text" id="nameClient" name="nameClient"/>
<input type="text" id="nameRouterID" name="nameRouerID"/>
<input type="text" id="dateInstallation" name="dateInstallation"/>
<input type="text" id="dateConfiguration" name="dateConfiguration"/>
<input type="text" id="dateConfirmationClient" name="dateConfirmationClient"/>
Well, i want to search the entire DOM for %date% word and apply datepicker jQuery plugin, avoiding to create this following lines for each element
<script>
$( "#dateInstallation" ).datepicker();
$("#dateInstallation").datepicker("option", {dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true});
});
</script>';
I think it's possible to know with .find() function and "this" relative, but i'm not familiar. I think is something like this:
$( "text" ).find( "%date%" ).datepicker();
And later:
$(this).datepicker("option", {dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true});
But i can't get it work I am not sure whether it is syntax problem or other
You can use the attribute starts with selector to match ID's starting with date
$('[id^="date"]').datepicker();
or to match any ID containing date, the attribute contains selector
$('[id*="date"]').datepicker();
FIDDLE

I need javascript to automatically prefix+suffix as it populates a field? I want it to be surrounded with apostrophes?

div with-altfield is a multidatepicker. Upon selection of a date it populates the altfield input. In format, mm/dd/yy,mm/dd/yy,.. I want it to actually populate the input with apostrophes surrounding the date selected. Like, 'mm/dd/yy','mm/dd/yy',... this is my code.
<script type="text/javascript">
$(function() {
$('#with-altField').multiDatesPicker({
altField: '#altField',
});;
});
</script>
</head>
<body>
<div id="with-altField"></div>
<input type="text" id="altField">
</body>
Please help!
Thank you
Si
Just use the dateFormat option. The syntax is explained here.
$('#with-altField').multiDatesPicker({
altField: '#altField',
dateFormat: "''mm/dd/yy''"
});

Get date from url and change selected date on jquery datepicker

after searching for a bit I decided to ask this question.
I have a jquery datepicker that is in a form, and after changing the date and clicking submit the url will look like this: index.php?thedate=12%2F22%2F2012# which is really 12/22/2012. I then need it to extract the url and change the selected date to whatever is in the url. So for my early example of 12/22/2012, the selected date on the calendar would be the 22nd.
Here's my code:
<form method='get' action='#'>
<div id="datepicker"></div>
<input type='hidden' id='thedate' name='thedate' />
<input type='submit' value='SUBMIT' id='submit'/>
</form>
and my javascript:
$( "#datepicker" ).datepicker({
minDate: 0,
onSelect: function(dateText, inst) {
alert(dateText);
document.getElementById('thedate').value=dateText;
}
});
Thanks for any and all help! If you need any more details or specifics, please just ask!
You have to set the date format. Do this:
$( "#datepicker" ).datepicker( "option", "dateFormat", 'mm/dd/yy' );
You also can specify 2 date formats. One for presentation purposes dateformat and another one the real date to use in you application. This last one is the altformat and must be togehter with the altfield, this field is a field that stores the picked date in its alternate format.
$("#datepicker").datepicker({
dateFormat: "mm/dd/yy",
altFormat: "mmddyy",
altField: "#alt-date"
});
<input type="hidden" id="alt-date"/>
Therefore you can use this altField (usually a hiddenField) to store date and send it to the server.
TEST IT

Categories

Resources