Mobiscroll date modal customisation - javascript

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

Related

Laravel Livewire: Cannot read property '$wire' of undefined

I have a problem with laravel livewire. I think the problem is really simple, but I can not solve it. Let me explain everything.
I have a daterangepicker (LitePicker), he works perfect, but I want when user select date range value to set this value to the property and filter data. My problem is that I can't set value to the property.
my Js Code:
#push('scripts')
<script type="text/javascript">
document.addEventListener('livewire:load', function() {
var field = document.getElementById('filter-date-range')
var dateRange;
var picker = new Litepicker({
element:field,
format: 'DD/MM/YYYY',
lang: 'de',
singleMode: false,
onSelect: function(start, end) {
#this.dateRange = start
}
});
})
</script>
#endpush
#this directive is compiled to
onSelect: function(start, end) {
window.livewire.find('').dateRange = start
}
I think the problem is here, because parameter which is passed to find function is empty or the id of the component is missing, and I don't know how to fix it.
Now here is the the error I received when date is selected:
index.js:30 Uncaught TypeError: Cannot read property '$wire' of undefined
at Livewire.value (index.js:30)
at e.onSelect (book_keeping:695)
at e.r.Litepicker.setDateRange (main.js:12)
at e.onClick (main.js:12)
at HTMLDocument.<anonymous> (main.js:12)
As you can see I use push directive so here is the code where I load the scripts
#livewireScripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.7.3/dist/alpine.min.js" defer></script>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
#stack('scripts')
Also I tried with events wire:model and wire:change without success.
I used like this
document.addEventListener('livewire:load', function() {
var field = document.getElementById('date-from')
var picker = new Litepicker({
element:field,
lang: 'de',
autoApply: false,
singleMode: true,
numberOfColumns: 1,
numberOfMonths: 1,
showWeekNumbers: true,
format: "D MMM, YYYY",
dropdowns: {
minYear: 1990,
maxYear: null,
months: true,
years: true,
},
setup: (picker) => {
picker.on('selected', (date1, date2) => {
Livewire.emit('from-selected', date1)
});
}
});
})
than in livewire
protected $listeners = ['from-selected' => 'fromSelected'];
public function fromSelected($from){
$this->from = $from;
$this->resetPage();
}
Try registering AlpineJS after Livewire Scripts.

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

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

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