I have bootstrap datetimepicker in my form. How to initialize it with my own time. I tried several options none of these are working. And also I want to disable past dates on date picker.
$('#timePicker').datetimepicker({
useCurrent: false,
format: "HH:mm",
pickDate: false,
defaultTime: '01:00 PM'
});
EDIT:
I tried the following, but it is initializing the picker as 03:00 AM and load the input field with this value. I just need the picker to be initialized with 01:00 PM, but no value is expected in the input field until user select the time from the picker.
$('#timePicker').datetimepicker({
useCurrent: false,
format: "hh:mm A",
defaultDate: '2000-01-01 01:00 PM'
});
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I'm new to vuejs and had to use date range picker. I'm using vue-rangedate-picker and after selecting a date range, $emit type event is fired and I found the required values in the payload of the event as shown below (event info taken from vue debugger):
name: "selected"
type: "$emit"
source: "<vue-rangedate-picker>"
payload: Array[1]
0: Object
end: "Fri May 31 2019 05:30:00 GMT+0530 (India Standard Time)"
start: "Wed May 01 2019 05:30:00 GMT+0530 (India Standard Time)"
I need to get the values in payload so I can assign to variables and use them later. I tried to find the solution for hours and had no luck.
Here is the element
<vue-rangedate-picker
righttoleft="true"
i18n="EN"
format="YYYY-MM-DD HH:mm:ss"
#selected="testDatePicker()"
></vue-rangedate-picker>
And the script
testDatePicker() {
console.log(/*what should I write here to get the payload?*/);
}
How do I get the payload values so I can assign them to variables? Please help me.
Your function testDatePicker will receive the range in the following form:
testDatePicker({start, end}) {
console.log(start, end);
}
or if you prefer:
testDatePicker(range) {
console.log(range.start, range.end);
}
Also, you should not use parenthesis in the call:
<vue-rangedate-picker
righttoleft="true"
i18n="EN"
format="YYYY-MM-DD HH:mm:ss"
#selected="testDatePicker"
></vue-rangedate-picker>
Like that, you pass a "reference" to your method, and the component will call it with needed parameters.
I am trying to set up my MaterlizeCSS timepicker to output the time for further processing. The docs don't give any instructions for this, but the pickadate.js docs themselves have instructions.
$('.timepicker').pickatime({
formatSubmit: 'HH:i',
hiddenName: true
})
From my understanding, this method should produce a hidden field with the name of the input field and the time in the 24-hr format. It isn't working for me. The name isn't stripped from the original input and the hidden field isn't created. I don't see any errors either. Has anyone else gotten this to work?
For reference, this is my function:
function setTimePicker (elem) {
elem.pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
style: {"color": "#ff16a2"},
formatSubmit: 'HH:i',
hiddenName: true,
aftershow: function () {
} //Function for after opening timepicker
});
}
EDIT: I've also tried setting the containerHidden option but it didn't do anything either.
I need a bootstrap datepicker where the start date and enddate must be customizable like start date is 01-01-1950 and end date is todate-18 years. Secondly wanted to show the dropdown year and month on the calendar topbar to use easily rather than the default bootstrap calendar.
For your reference have attached an image which 'm using now without bootstrap.
Any idea/link is appreciated.
you can not put dropdown but can achieve same functionality by another way with new bootstrap version.
check out this link http://www.malot.fr/bootstrap-datetimepicker/
<script>
$(document).ready(function() {
$('#date_deb').daterangepicker({locale: {format: 'DD/MM/YYYY'},
showDropdowns: true,
minDate: '01/01/2016',
singleDatePicker: true,
singleClasses: "picker_2"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>
I have a problem with sencha touch datepicker field. I want to set default (current date) in datepicker field but I am not able to find a way to do that. I am using sencha architect and there is no property exist to set default date in datepickerfield.
I am using the following code in value property of datepickerfield:
{
year: (new Date()).getFullYear(),
day: 1,
month: 5
}
But application stop working when using above code to display date.
Please tell me how to achieve this.
Checkout the 'value' property
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.picker.Date-cfg-value
You'll want to add an initialize function to whatever class contains your datepicker.
Select that class.
Then add an initialize function from the config
panel.
Then add the following code to the initialize function:
var picker = this.down('datepicker');
picker.setConfig({
value: new Date()
});
this.callParent();
Of course if you have multiple datepickers you'll want to give it an item id and use this.down('#thedatepicker');
This can be done in the config of the container itself as follows:
xtype: 'datepickerfield',
value: new Date(),
picker: {
yearFrom: 2015,
yearTo: 2030
}