how to change default value of jquery datepicker - javascript

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()
}
});

Related

Set default date insted of current date in evo-calendar

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
})

Bootstrap DateTimePicker for Arabic Calendar

Using Bootstrap Datetimepickers I need to get only the date in the datepicker value.
But in the Arabic calendar when I am trying to replace DateTimePicker with DatePicker the calendar popup does not work
$(function () {
$('#txtIssueDate').datetimepicker();
$('#txtEshtablishedDate').datetimepicker(); // Umm ALqura Calendar
$('#txtExpiryDateHijri').datetimepicker({ locale: { calender: 'ummalqura', lang: 'ar' } });
$('#txtEshtablishedDateHijri').datetimepicker({ locale: { calender: 'ummalqura', lang: 'ar' } });
$('#txtCRIssueDateHijri').datetimepicker({ locale: { calender: 'ummalqura', lang: 'ar' } });
});
Note - I have a requirement of displaying only the date in Arabic(not date n time).
Using the format below will disable the time picker. Keep other options of yours unchanged
$('#txtExpiryDate').datetimepicker({
format: 'YYYY-MM-DD'
});

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?

Set default bootstrap date and datetime values at page load using javascript

I'm using date and datetime functions for my textfields, when I click at textfield it shows the calender and I select date and datetime from calender and my functions are
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy",
startDate: new Date()
});
$(".datetime-picker").datetimepicker({
autoclose: true,
isRTL: Metronic.isRTL(),
format: "mm/dd/yyyy - hh:ii",
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")
});
What I want is when I load my page the values set by automatically current date and datetime. I search about these functions but cannot set default values of current date and datetime. I also try defaultdate: new Date() OR defaultdate: '03/09/2015' but didn't work for me. How could I do this?
I've done this but my programme is not working properly I don't know why is this happening?
Use setDate as shown below, (this code should be on the document ready event)
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy"
}).datepicker("setDate", new Date());
Sample from my code:
Display current Date:
buildLogDateToTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", new Date());
Set previous date:
buildLogDateFromTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", "-7");

Categories