Set default date insted of current date in evo-calendar - javascript

Flexible Event Calendar In jQuery - evo-calendar - How to set default selected date instead of current date.
$('#demoEvoCalendar').evoCalendar({
todayHighlight:false,
selectDate:"09/10/2020",
format: "mm/dd/yyyy",
titleFormat: "MM",
sidebarToggler: true,
sidebarDisplayDefault: false,
eventListToggler: false,
eventDisplayDefault: false,
calendarEvents: [ ]
});

use selectDate inside $(document).ready
$(document).ready(function() {
$('#demoEvoCalendar').evoCalendar({
todayHighlight:false,
...
});
$("#evoCalendar").evoCalendar('selectDate', "February/15/2020"); //replace date here
})

Related

how to change default value of jquery datepicker

I have two date picker one for start date another one for end date
I want to change the end date selector value to the start date value after setting the start date value how can I achieve that ?
here is my code:
jQuery('#dp-rtd>input[data-toggle="datepicker"]').datepicker({
trigger: '#dp-rtd',
format: 'yyyy-mm-dd',
startDate: Date.now(),
pick: function () {
jQuery('#dp-rtr').click()
}
});
jQuery('#dp-rtr>input[data-toggle="datepicker"]').datepicker({
trigger: '#dp-rtr',
format: 'yyyy-mm-dd',
startDate: Date.now(),
pick: function () {
jQuery('body').click()
}
});

bootstrap datetimepicker need to add keyBinds conditionally

I need to add the keyBinds for delete and enter button properties conditionally.
I tried using the Object.assign() method, but not sure how to get hold of datetimepicker object associated with my input control, and how do I enable or disable keyBinds conditionally.
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
Object.assign($inputCtrl.data("DateTimePicker"), bConditionalDeleteTest && {keyBinds: {'delete': null}});
if we initialize this object statically, it would be
$('.inputCtrl').datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true,
keyBinds: {'delete': null} /*this would disable the default Delete key behavior of the control.*/
});
You can simply use keyBinds function.
keyBinds()
Returns a string variable with the currently set options.keyBinds option.
keyBinds(object)
Takes an object value.
Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.
You can have something like:
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
if( bConditionalDeleteTest ){
$inputCtrl.data("DateTimePicker").keyBinds({'delete': null});
}

Disable Auto formatting of date in bootstrap datepicker

Am having issue where if someone enters an invalid date manually such as "%/4/12" into the datepicker it will autoformat it to "04/12/2017" or if you enter "12/123/20258" it formats to ‘12/12/2025 which I don't want. Is there any way to disable this? Here is what I already have:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
defaultDate: false,
useCurrent: false,
keepInvalid: true
});
});
Add:
useStrict
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usestrict
and Change your codes to this:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
useStrict: true,
keepInvalid: true,
});
});

DatePicker bootstrap date from filled filed angularjs

I'm using bootstrap in my application web.
I created a method that initialize all input of type date with a class called form_datetime:
function initDatepicker(){
$(".form_datetime").datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "it",
todayHighlight: true,
autoclose: true,
orientation:"auto"
});
}
The input html:
<input name="date" class="form-control form_datetime date"
type="text"
ng-model="date"
required >
Here the issue is that when i pick the field of date , the input will be empty and i losed the value that is setted before (value getted from dataBase).
The date value comming in format string "dd/mm/yyyy".
How can i get the date in the calender of the actual date of the input?
If you use AngularJS Material Datepicker and the moment plugin, you can force that format with
.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD/MM/YYYY');
};
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, 'DD/MM/YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
});
See it implemented.
The solution is in the followin link
function initDatepicker(){
$(".form_datetime").datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "it",
todayHighlight: true,
autoclose: true,
orientation:"auto",
forceParse: false //
});
}

Javascript Calendar.Setup date format issue

I have a C# page that has a javascript calendar on it and that caledar drives what information gets pulled for the user. The calendar is set up as follows:
if (document.getElementById("calendar-inputField")) {
var cal_inp_fld_currvalue = "";
var cal3 = Calendar.setup({
inputField: "calendar-inputField",
trigger: "calendar-inputField",
dateFormat: "%m/%d/%Y",
showsTime: false,
animation: false,
min: midDate,
max: new Date(),
fdow: 0,
singleClick: true,
step: 1,
electric: false,
onFocus: function () { cal_inp_fld_currvalue = document.getElementById('calendar-inputField').value; },
onSelect: function () { this.hide(); if (cal_inp_fld_currvalue != document.getElementById('calendar-inputField').value) { ajax_call('qbonline.aspx?fn=AJAX', document.getElementById('idSelGetBatchType').value); } }
});
the issue I'm having is with the dateformat, I found that if I use chrome and set my language settings to English (Canada) and I select a date like 05/23/2017 the calendar thinks that is an invalid date because the canadian date is viewed as dd/mm/yy.
What I want to know is if there is a way to ignore the users chrome settings and always use one format?

Categories