Bootstrap DateTimePicker for Arabic Calendar - javascript

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

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

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

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?

Mobiscroll date modal customisation

Have a mobiscroll instance to show date:
$(document).ready(function () {
$("#date").mobiscroll().date({
theme: 'wp',
mode: 'clickpick',
onChange: function (ins) {
console.log(JSON.stringify(ins));
}
});
});
Currently the datepicker displayed in the format like: dd/mm/yyyy
How can swap the order be to see mm/dd/yyyy ?

$(document).ready(function () {
$("#date").mobiscroll().date({
theme: 'wp',
mode: 'clickpick',
onChange: function (ins) {
console.log(JSON.stringify(ins));
},
dateFormat: 'mm/dd/yyyy'
});
});
Here's the link for more info:
https://docs.mobiscroll.com/3-1-0/jquery/datetime#!localization-dateFormat

Categories