Develop Reference

how can I update two fields with a single date picker in JS?

In my javascript code I'm using datepicker, like this:
<script type="text/javascript" language="javascript">
function datepicker(element) {
element.datepicker({
showOn: "both",
buttonImage: "calendar",
buttonImageOnly: true
});
}
and later I'm attaching it to the input with id="startDate":
$(document).ready(function(){
datepicker($("#startDate"));
});
it works correctly and fills the startDate input with selected date.
But I also have the second input, called endDate - is there a way to handle it within datepicker, so that when user selects startDate, the endDate is populated automatically with a selected date incremented of 2 days?

Try having same class for two inputs and pass the class name instead of id and pass it to datepicker($(".dateField"));

How hide select date in bootstrap-dateTimePicker?

I have this DateTimePicker:
I need edit only the time , so I need only show this :
code:
setDateTime: function(index){
$('#date_time_'+index+'_id').datetimepicker({
showClose:true,
format: 'DD/MM/YYYY HH:mm',
ignoreReadonly: true
});
},
So the input showing the date and time is fine, but I need edit only the time
Im using this :
bootstrap-datetimepicker
but I don't know what option use.
Sorry my english.

unfortunately I think that without updating of bootstrap datetimepicker lib you would have to use alternative. As this library is not prepared for just time picker.
Please use something like this instead. Same format, but more options for you:
http://tarruda.github.io/bootstrap-datetimepicker/
Then you can set what you want just with this
$('#date_time_'+index+'_id').datetimepicker({
pickDate: false
});

Just specify only time in the format like this:
https://jsfiddle.net/9jkxL4su/
$('#datetimepicker1').datetimepicker({
format: 'LT'
});
EDIT:
To show calendar (toggle) icon, you'll need to fire a toggle-click when the picker is shown:
https://jsfiddle.net/pv8Lhy9t/
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
showClose: true
});
$('#datetimepicker1').on("dp.show", function(){
var toggle = $(this).find('a[data-action="togglePicker"]');
if(toggle.length > 0) toggle.click();
// To hide the toggle back to calendar button, uncomment line below
// $(this).find('a[data-action="togglePicker"]').hide();
});
NOTE:
You can remove the ability for the user to toggle back to edit the date. Just uncomment the last line as shown in the code above.
READONLY: To restrict ability to edit date manually, just give the input field a readonly attribute and also set the ignoreReadonly property to true in the picker: https://jsfiddle.net/xgm99t5o/

What is the name of the component ?
Perhaps you can use something like:
pickDate: false;
or only
format: 'HH:mm',
In this component it looks like: https://tarruda.github.io/bootstrap-datetimepicker/

set today date with respective format that initialized earlier on jquery datepicker

I have already initialized my jquery datepicker with the format dd-M-yyyy. On some particular event I want to set that datepicket with today's date with the respective date format(dd-M-yyyy) that already I have set. I tried these codes but none of them are working, help me..
html
<input id="SD_WO_DATE" readonly="readonly" type="text">
js
$("#SD_WO_DATE").datepicker().datepicker( "option", "defaultDate", new Date() );
and
$("#SD_WO_DATE").datepicker().datepicker("setDate", new Date());
These are setting date with mm-dd-yyyy which I don't want.

Demo
Use setDate property of datepicker with today as the value,
$('#SD_WO_DATE').datepicker({ dateFormat: 'dd-M-yy' });
$('button').click(function(){
$('#SD_WO_DATE').datepicker('setDate', 'today');
});

How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?

I have have a div with a user's date of birth pre-populated with php:
<div id="datepicker" class="input-group date">
<label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
The javascript:
<script>
$('.container .input-group.date').datepicker({
startDate: "01/01/1900",
endDate: "01/01/2100",
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true
});
</script>
Bootstrap is setup and working correctly however, when the "dob" input gets and loses focus without making a date selection it clears the value that was pre-populated.
This however doesn't happen if a date has been selected via the datepicker and then the input gets and loses focus.
How can the pre-populated value be kept in the field if someone clicks in it?
Edit: The first time you make a date selection, it clears the pre-populated value but doesn't insert the selected date until you make a date selection a second time.
Update: Working code updated!

Set Force parse value to false:
forceParse: false
$(".applyDatepicker").datepicker({
forceParse: false
});

I am not sure about its working in php but for mvc I got the same problem that Bootstrap would erase the value if the control gets and loses focus without making a date selection.
I found that Bootstrap erases the value as it doesn't recognize the value set by
$('#dtControl').val(nextMonth);
I am working with bootstrap v3.1.1 and the following code worked for me
$('#dtControl').datepicker('setDate', nextMonth);
to populate the datepicker control. This way Bootstrap recognizes the date and doesn't erase it if control gets and loses focus

Can't tell for sure without more of an example but the problem is probably that the $this->swimmers->dob string you are giving to the input is not recognised as a date format by bootstrap-datepicker. You can define the date format it uses by adding the data-date-format attribute to your input.
For example if you were using a MySQL formatted date or PHP's DateTime object with $date->format('Y-m-d') you could use:
<div id="datepicker" class="input-group date">
<input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

I had a similar problem when a user clicked on the same date twice. The field would "toggle" between the date clicked on and a blank field. I basically didn't want it to be empty at any stage, so here's how I got around that, partly thanks to Waqas's answer:
var datepickerContainer = $('#datepicker');
datepickerContainer.datepicker({
startDate: "01/01/1900",
endDate: "01/01/2100",
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true
}).on('show', function() {
datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
var newDate = $('input#dob').val();
if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
}
});
That keeps it relatively self-contained, by storing the last date value in that instance of the datepicker and results in no clearing of the input.
I know you solved this problem, but I figured this snippet might come in handy for someone else in a similar situation.

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered. Futhermore, a non empty string will evaluate to true. Based on these facts, simply do a check in the event handler. See sample code below.
.find( 'input[name=startDate]' )
.datepicker( {format: 'dd-mm-yyyy'} )
.on( 'changeDate', function() {
if( this.value ) {
<< do something >>
}
});
NOTE: For efficiency and readability in code sample above, the DOM property value is checked, instead of wrapping this in a jQuery object and calling val() on it ( $( this ).val() ). This is a minor improvement, but it's a good practice to be as compact/simple as possible.

Another solution is to define the options at the global level:
$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;
Now, when use update method, datepicker don't lost options.

$('#dob').datepicker('update', '2011-03-05');
You can use like this. Although for me it was working by simply passing value to element by using .val() function.
Reference URL.
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html

datepicker issue storing wrong value

Using Datepicker I have 2 problems.
1) when the page loads I want the field to display todays date 01/10/2013. Instead it displays 01/01/0001...however if the user clicks on the field and the datepicker calendar appears, todays date will be highlighted on the calendar, why is it being high lighted on the calendar but displaying wrong date in the field
2)If the user selected a date from the datepicker it stores whatever date is selected plus an additional 2013....so user selects todays date, 01/10/20132013 will be stored in the field.
Any Help on how to resolve this. thanks guys
#Html.TextBoxFor(model => model.SelectedDate, new { #class = "jquery_datepicker", #Value = Model.SelectedDate.HasValue ? Model.SelectedDate.Value.ToString("dd/MM/yyyy") : string.Empty })
#using (Script.Foot())
{
<script type="text/javascript" language="javascript">
$(function () {
var dates = $("#SelectedDate").datepicker({
dateFormat: 'dd/mm/yyyy'
})(todayDate);
});
</script>
}

For your first point, you may try to initialize your datepicker removing the uppercase in dd/MM/yyyy. This should solve this matter : dd/mm/yyyy.
And for the second part, year format seems to be only yy. By adding twice "yy", the datepicker display twice "2013".
I hope this help.
EDIT #1
$(function () {
var dates = $("#SelectedDate").datepicker({
dateFormat: 'dd/mm/yyyy',
defaultDate: new Date()
});
});