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()
});
});
Related
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"));
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
I am trying to integrate the Bootstrap 3 Date/Time Picker v4.17.42 into a webpage. I have a text field that is pre-populated with a date prior to calling the datepicker.
The field is as follows;
<input value="19/02/1986" class="form-control datepicker" type="text" name="patient[date_of_birth]" id="patient_date_of_birth">
and I call the datepicker like so;
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false,
maxDate: new Date(),
minDate: now.setFullYear(now.getFullYear() - 110)
});
When I click in the text field the datepicker appears, but it shows the current month rather than February 1986. If I click out of the field and then back in, the datepicker disappears then reappears set correctly to February 1986.
What do I have to do to so the correct month appears the first time the datepicker is opened?
You can force a refresh programatically after the initialize:
$('.datepicker').datetimepicker('setDate', new Date(1986, 02, 19));
$('.datepicker').datetimepicker('update');
You can also add a property to the object when initalizing:
setDate: new Date(1986, 02, 19)
To use default data just try this
$("#datepicker").datepicker("setDate", new Date());
In this script new Date() returns the current value that will be assigned to setDate attribute.
Like you said, this is a bug in the latest versions, tracked here: github.com/Eonasdan/bootstrap-datetimepicker/issues/1831
However, I found a work around that might be helpful in the meantime (if you don't want to use version 4.17.37):
var selectedDate = moment($('#patient_date_of_birth').val(), 'DD/MM/YYYY');
$('#patient_date_of_birth').data('DateTimePicker').viewDate(selectedDate);
Do this after your datepicker initialization.
This is the syntax needed hard refresh the view for this particular datepicker. You access the picker via data('DateTimePicker'), and the viewDate() method updates the date displayed by the picker.
I have 3 date pickers on my page and the selected dates are stored in the database. If the values are empty I want the field to be empty, but it shows today's date. I have used the below code,
jQuery('.date-picker').datepicker({
startDate: new Date(),
autoclose: true,
todayHighlight: true,
setDate: ''
});
How do I keep the datepicker field empty on load?
Try this code
<input type="text" id="example1"/>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker();
$('#example1').val("");
});
</script>
Hope this will help you.
onRender : This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected.
http://www.eyecon.ro/bootstrap-datepicker/
see "Disabling dates in the past and dependent disabling." section Example
this May Help
$(document).ready(function () {
$('#text_fied_id').datepicker();
$('#text_fied_id').val("");
});
Try leaving out the startDate in the datepicker options
I am using jqueryUI datepicker for a date range as in this demo. This is failing to validate To as future date to From in the following case:
In FROM date choose 11/19/2011. Now go to Nov month of the 2011 in the TO datepicker, you can't pick the date before "11/19/2011". This is fine and expected behaviour
Now place your cursor in FROM date picker textbox using the mouse. Select the picked date i.e 11/19/2011 and delete i.e make the textbox empty. At this point of time 2 textboxes are empty.
Now go to 'TO' datepicker Check for NOV 2011. All the dates before 11/19/2011 are still disabled which is not required behaviour.
To solve this I made textboxes readonly but i want a better solution for this issue so that user can enter the date with keyboard as well as pick with mouse.
This is because the logic for setting minDate and maxDate is located in the select event listener (which does not get fired off when you completely remove a date from a datepicker field). You could bind to the change event instead:
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
}).bind("change", function() {
var option = this.id == "from" ? "minDate" : "maxDate",
selectedDate = this.value,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
});
Example: http://jsfiddle.net/TMnRX/