I have 1 page that have 3 form in it, then my problem is my datepicker is working 1 only, the other make null result, how can I use this 3 date picker in 3 different form ?
here's my JS
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
just in case, I possible how can I make 3 datepick with different name ? (like date, date1 & date3)
in this 1 JS
instead of using var date_input=$('input[name="date"]');
add unique id to each datepicker and use above line like this
var date_input=$('#datepiker1, #datepickwer2, #datepicker3');
should work fine
try these
Try 1: if works that means your datepicker or datepiker1 has not yet been loaded
setTimeout(function(){
var date_input=$('#datepiker1, #datepickwer2, #datepicker3');
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
});
}, 500);
try 2:
$("#datepiker1").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
$("#datepiker2").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
$("#datepiker3").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
Related
I have a bootstrap datepicker (* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker))
I need Monday to be displayed first instead of Sunday.
I've tried this: included bootstrap-datepicker.en-GB.min.js file (in which weekstart=1); then wrote the following in my script:
<script>
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: 'TRUE',
autoclose: true,
language: "en-GB",
locale: "en-GB",
weekStart: 1,
})
</script>
Help please
Try , instead of weekStart: 1 use firstDay: 1
$('#eventDate-container .input-group.date').datepicker({
weekStart: 1, // calendar starts on Monday
autoclose: true,
todayHighlight: true,
startDate: "4/10/2017", // disables all dates prior to this date
datesDisabled: ['01/01/1970', '12/31/2099'] // placeholder sample for possible future use
});
first i think that what you need is a "jquery" code not in "PHP"
, you can disable previous dates from jquery datepicker by using minDate: option
like :
var tardate = new Date("4/10/2017");
$("#eventDate-container").datepicker({
weekStart: 1, // calendar starts on Monday
autoclose: true,
todayHighlight: true,
minDate: tardate,
});
here's jsfiddle link
I want to disable array of dates and sunday and saturday.. My array of dates work perfect, but business logic need to disable sunday and saturday.. How to do this?
This is my code for array of dates:
function checkDateFromForEvent() {
var datesForDisable = new Array();
var clientContext = new SP.ClientContext.get_current();
var eventsList = clientContext.get_web().get_lists().getByTitle("Events");
var camlCheckQry = new SP.CamlQuery.createAllItemsQuery();
var items = eventsList.getItems(camlCheckQry);
clientContext.load(items, "Include(EventDate)");
clientContext.executeQueryAsync(successHandler, errorHandler);
function successHandler() {
if (items.get_count() > 0) {
var iEnum = items.getEnumerator();
while (iEnum.moveNext()) {
var item = iEnum.get_current();
datesForDisable.push(moment(item.get_item("EventDate")).format("DD-MM-YYYY"))
}
}
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable
})
I want to insert in datesDisable paremeter, sunday and saturday..
You can use beforeShowDay hook
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6],
beforeShowDay:function(currentDate){
var dayNr = currentDate.getDay();
if (dayNr==0 || dayNr==6){//you can condition this with your own logic
return false;
}
return true;
}
});
Use daysOfWeekDisabled: [0,6]
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6]
})
Demo here
I am using bootstrap datepicker when I click on input field calendar display above the input field. I want to display it bellow input field.
JS
$(function () {
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
}).datepicker("setDate", new Date());
//alert("#FirstFiscalTo");
});
Input Field
<input class="textboxCO input-sm form-control datePickerPickcer" id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">
Lücks solution is the one, just one minor detail dateFormat option is not valid, is format as referenced in the official doc here. You are not noticing this error because "mm/dd/yy" is the default format.
So, te solution will look like:
$(function () {
$("#fiscalYear").datepicker({ //<-- yea .. the id was not right
format: "mm/dd/yy", // <-- format, not dateFormat
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // <-- and add this
});
});
$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // add this
});
});
Reference: https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "bottom left" // left bottom of the input field
});
$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">
For datepicker from jquery rather than bootstrap, option [orientation] is not available.
The positioning of the datepicker panel is auto set by jquery depending on the cursor position relative to the window.
To ensure that datepicker is always below the cursor position when an input field is selected, I used the below code
$("input").datepicker().click(function(e){
$('.ui-datepicker').css('top', e.pageY);
})
e.pageY is the current mouse Y axis position in window.
as class ui-datepicker position is absolute, when "top" attribute is set to cursor Y axis value, the datepicker ui panel will be displayed always below cursor.
I've had some issues in my website...
when I change my radioButton, I wanna set my bootstrap-datepicker format to 'dd/MM/yyyy' or 'MM/yyyy' using just one input text field, but it doesn't work, someone can help me?
This is my javascript function below
function setDatePicker(value) {
if (value === "D") {
LimparCampo('date1');
$('#datetimepicker1, #datetimepicker2').datepicker({
language: 'pt-BR',
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
todayBtn: true
});
}
else {
LimparCampo('date1');
$('#datetimepicker1, #datetimepicker2').datepicker({
language: 'pt-BR',
format: 'mm/yyyy',
autoclose: true,
todayHighlight: true,
todayBtn: true
});
}
}
I´ve found the solution
I just use $('#datetimepicker1, #datetimepicker2').datepicker('remove');
Cya ^^