Hello i am new in frontEnd, can you help me with some issue, i have create a materialize datepicker and want to add function when is 12 AM to disable selected day? this is code :
M.Datepicker.init(Calendar, {
format: 'dd-mm-yyyy',
showClearBtn: true,
disableWeekends: true,
firstDay: 1,
minDate: new Date(2020, 9, 1),
i18n: {
clear: 'Remove',
done: 'Confirm'
},`
I believe there is no such option in that plugin to do so.
What I would do, is check before calling that plugin, that current time is before 12 AM.
If it is, I would display the datepicker, else, I would hide it and show message informing that.
Related
In this example clicking on a date it is possible to edit it, but if you use the option "stopEditingWhenGridLosesFocus", the date picker doesn't work anymore. Is it possible to fix this?
<AgGridReact
stopEditingWhenGridLosesFocus // without this line works fine
columnDefs={this.state.columnDefs}
components={this.state.components}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
/>
Having "stopEditingWhenGridLosesFocus" set to true, when you click on a date, the input tag is gone, so the reference for your datepicker gets lost.
I had the same issue and I solved it doing this:
Change your custom component settings to work in a popup:
Datepicker.prototype.isPopup = function() {
return true;
};
Then, call to stopEditing() method on select event in your datepicker:
$(this.eInput).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
params.stopEditing();
}
});
I have created a new working fork from your example here
stopEditingWhenCellsLoseFocus = true
I have facetwp installed in wordpress and after the search was made, the search widget doesn't show the correct date as per selected before search
how to override this display issue (selected date) by javascript?
To view this problem in action : https://www.sweetpictures.com.my/product-category/photographers/?fwp_photo=2018-01-31%2C2018-01-31%2C1&fwp_productcategory=ampang&fwp_expertise=wedding-reception
Supposed the calendar picker selected date was 31st jan 2018
but instead it shows Aug 20th 2018
Kind help and assistance appreciated
Use the documentation of Flatpickr to set the default date to the one you want : https://chmln.github.io/flatpickr/examples/#supplying-dates-for-flatpickr
That way you can add the following parameters to you flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y'
})
If this is not working, try setting the input to the good date with the onReady function in the flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y',
onReady: function (selectedDates, dateStr, instance) {
$('#your-date-element input').val(
instance.formatDate(new Date(), 'd/m/Y')
)
},
})
Hi I'm using pickadate and for some reason the date in my input field is not showing as the date when opening the picker.
Secondly the year picker is never shown.
$("input").click(function(){
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});
});
The initialization of the plugin is occurring when the input is clicked; the same input that is to have the plugin applied. The plugin needs to be initialized on the input before the input is clicked. To do this, remove the click function:
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});
Heres my scenario: I have an index page with 2 radio buttons on it and a span area for results. When one of the radio buttons are clicked, the span fills up with an ajax generated page that has an input box as so :
<input size='25' class='datepicker' value='Click to enter deposit date' READONLY type='text' id='depositDate' name='depositDate'>
At the bottom of this page there is an 'Add Record' button which fires off javascript validation. The validation is so:
var inpDepDate = $.trim($("#depositDate").val());
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
document.getElementById('payDate').focus();
document.getElementById('payDate').select();
return false;
}
Also in my javascript file is :
$(function(){
$( "#depositDate" ).live('focus', function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
minDate: "+1D",
showOtherMonths: true,
selectOtherMonths: true}).focus();
});
});
The problem is when the validation fails, the text does get highlighted and selected but it does not open automatically.
Ive tried a number of things, actually a ton of things from this site, and no luck. And it seems to never recognize the live event. But if I click on the text box after its failed the validation (and the text is highlighted), the calendar opens just fine. Im fairly new at jQuery and ui.
You don't need to reinstantiate the datepicker if you've already called it on #depositDate in the past. (Or on payDate)
Try this:
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
$("#payDate").datepicker("show");
return false;
}
I am new with EXTJS 4 and this forum. Sorry if it's already discussed in another thread, but I didn't found it.
My question is, I want my Grid Panel with Pagination to update it's store every 10 seconds. I have found a solution using userStore.loadPage(current_page), but it has a problem.
Some time, updating Grid Panel nearly in same time with user click "next" or "prev" in Pagination. This make Grid Panel to not working properly. What I want is, when I click "next" or "prev" or "refresh", the previous request (userStore.loadPage(current_page)) is aborted. So it will not interfere my current request.
But I didn't found event in EXTJS Paging Toolbar to handle "next", "prev", or "refresh" button. What is the solution for this issue? Is there any way?
This is my code just for reference:
// create User Store
var userStore = Ext.create('Ext.data.Store', {
model: 'EDC',
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url : 'Monitoring', // it is using Java servlet, so I write it this way
reader: {
type: 'json',
root: 'edc',
totalProperty: 'total'
}
}
});
// create Grid Panel
Ext.create('Ext.grid.Panel', {
store: userStore,
width: 800,
height: 400,
columns: [
{
text: "ID",
width: 50,
dataIndex: 'id'
},
{
text: 'Serial Number',
flex: 1,
dataIndex: 'sn'
}
// etc...
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
dock: 'bottom',
displayInfo: true
}]
});
It is how it is updated every 10 seconds
// after on Ready, reload every 10 seconds
Ext.onReady(function(){
self.setInterval("reloadCurrentEdc()", 10000);
});
// function for update
function reloadCurrentEdc(){
if(typeof userStore != 'undefined'){
userStore.loadPage(userStore.currentPage);
}
}
I think your problem is that your 'auto load' and your 'manual load' are so close together that your grid handles the result coming back from the first request as the second one.
I do agree with Alshten that the best way is to avoid requests that are so close together, you can do this by disabling the store load when there is already a store load in progress. but if you want your functionality I think you can do something like this:
listen to beforeload( Ext.data.Store store, Ext.data.Operation operation, Object eOpts ) event on the store, save the eOpts; listen to load( Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts ) compare the eOpts with the one you saved, if they are not the same, you know it's not the results you want.
You can have a look to the documentation about the paging toolbar component :
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging
There is a change which is fired every time the current page is changed, so it will be fired for "next" and "prev" click events. I haven't tried but I think it may be fired for "refresh" as well.
In my view, the best design would be to disable the buttons of the paging toobar (using the disable() function of this component) while the automatic reload is loading.
I use this selector: "gridpanel pagingtoolbar #refresh".
I'm able to use in my Controller classes in the init method mostly.
You can replace gridpanel with the alias or itemid of your grid.
.
.
.
init: function() {
this.control({
'gridpanel pagingtoolbar #refresh':{
click:function(){
console.log('grid panel', arguments);
}
}
});
},
.
.
.
Use
beforehange: function (tbar, pageData, eOpts) {
// here you can load data from server and load the data to store
return false // will avoid triggering store events
}
pageData is the page number
all button clicks like next/prev/refresh will trigger this function