How to select time with React DatePicker - javascript

I'm using React Date Picker and I need also include time to the Date selection. I didn't find any example from documentation how to implement this. Does DatePicker provide any functionality for this out of box, or do I have to customize it myself?

just add showTimeSelect
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="LLL"
/>
check more examples # reactdatepicker

You can use react-date-picker module for a date with a timestamp.
You can include the time by including timestamp in your dateFormat property.
E.g.: dateFormat="DD/MM/YYYY HH:mm:ss"
EDIT:
Original links are not working anymore. Here's more information about react-date-picker. https://www.npmjs.com/package/react-date-picker
Original links:
http://zippyui.com/docs/react-date-picker/
https://github.com/zippyui/react-date-picker/

Related

Limit time in v-calendar datepicker

I am working on a project where user request for appointment. I am using v-calendar which uses the datepicker.
I am facing a issue where user can request for appointment any time/ 24 hours which I need to set only for 9am - 5pm. I can see that we can limit date in date picker by using something like :max-date="value" but could not found how to limit the time.
Here is the working fiddle
some code from the project
name="appointment-date"
v-model="appointment_date"
mode="dateTime"
:is24hr="false"
:min-date="currentDate"
:model-config="dateTimePickerConfig"
:popover="{
visibility: 'click',
placement: 'auto',
}"
:masks="{ inputDateTime: 'MM/DD/YYYY h:mmA'}">
<template v-slot="{ inputValue, inputEvents }">
<div class="form-icon ">
<input-component
:value="inputValue"
v-on="inputEvents"
placeholder="MM-DD-YYYY h:mmA"
/>
<Icon name="date-time"/>
</div>
</template>
</date-picker>
Your help to solve the problem will be higly appreciated.
Thank you.
If I understood you well, you want to restrict picking specific hours. This is possible with v-calendar with the following property:
<v-date-picker v-model="date" :valid-hours="[0,3,4,5,8,16,20]" is24hr />
Please note the :valid-hours attribute. You can provide which hours should be available for the user to pick. If you want to allow them to pick minutes in specific 'intervals' you can use following as well:
<v-date-picker v-model="date" mode="dateTime" :minute-increment="15" />
Note :minute-increment property. This will allow user to pick between '15 minutes. So available numbers will be 00, 15, 30, 45. You can play with it.
Unfortunately, there is no way to disable minutes, which makes me sad. As if someone books appointment at 9:15 AM you would rather want to 'disable' 9:15 AM for next users. You could disable whole hour (9 AM) but not specifically 9:15, so that 9:00, 9:30 and 9:45 would still be available. At least I don't know any easy way.
Hope this helps anyone.
================ UPDATE =================
Note that v-calendar added those additional properties in specific v-calendar version. I've been using it with v2.4., seems like v2.3. does not have it yet.

Month Date Range Picker - Vue.js

I'm looking for a library like bootstrap date-picker for Vue.js .
But I need one where I can make some configuration like this one I'm using in a bootstrap daterange-picker
$('.input-daterange').datepicker({
format: "mm/yyyy",
language: "es",
autoclose: true,
startView: 1,
minViewMode: 1
});
I have some example code here https://stackblitz.com/edit/js-jcldh8
I'm having some trouble using Vue js with this library so I hope someone can help me.
Thanks.
I`m using element ui for Vue.js.
https://element.eleme.io/#/en-US/component/date-picker
<el-date-picker
v-model="birthdate"
type="date"
placeholder="Pick a Date"
format="mm/yyyy"
value-format="yyyy-MM-dd">
</el-date-picker>
There are so many libraries for Vue js that you can use easily like Element Ui, Vuetify etc.
but you can use Element UI that is very easy to use and it has so many nice features like bootstrap.
you can install it by npm or use by cdn, see documentation here
and components date picker
Calling Element Ui date picker:
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions1">
</el-date-picker>
For Vuetify you can go here, it also can install in npm node or use cdn.
Vuetify date picker:
<v-date-picker
v-model="picker"
:landscape="landscape"
:reactive="reactive">
</v-date-picker>

How to set defaultDate in local time using a UTC value from a hidden field in eonasdan-datetimepicker?

I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?

Add jQuery Calendar plugin to gvNIX sample project

I am trying to add a jQuery calendar plugin, located at http://keith-wood.name/calendarsPicker.html
to the gvNIX project sample which uses a datePicker (I just wanted to see how it works).
My goal is to replace this datePicker with the plugin provided by K.Wood. to have calendars other than gregorian.
Unfortunately i did not succeed in doing so.
Here is the file i think i should modify from the gvNIX project
http://pastebin.com/5uvuDzfg
I am not a Javascript developer, so i do not know where to call the new calendar to make it work.
Thank you for your time.
If someone need it i write what i have done.
I implemented the Jquery plugin but to replace the current date picker i changed for dojo, because Roo using it.
https://dojotoolkit.org/reference-guide/1.9/dojox/date/umalqura.html I change the load-script to load the desired dojo.js files and create a copy of the datetime tag to modify it with my new picker. ( For being able to set a new tag you need to recompile the project once ). My datePicker is working well. It stored the date in gregorian any way.
In the load-script
<spring:url value="/dojox/date/umalqura.js" var="umalqura_url" />
<spring:url value="/dojox/date/umalqura/Date.js" var="umalqura_date_url" />
<spring:url value="/dojox/date/umalqura/locale.js" var="umalqura_locale_url" />
...
<script>dojoConfig = {parseOnLoad: true}</script>
...
<script language="JavaScript" type="text/javascript">dojo.require("dijit.form.DateTextBox");</script>
And in the new datetime.tagx
<input id="_${sec_field}_id" name="${sec_field}" data-dojo-type="dijit.form.DateTextBox" datePackage = "dojox.date.umalqura" constraints="{datePattern:'EEEE dd MMMM yyyy'}" />
I did not figure a way to convert back the date when displaying because it's in gregorian in database.
I tried the same with a input to only register the string, but even then dojo convert it in gregorian.

How to change the displayed date format in Datepicker?

I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​,
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?
refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});
What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.

Categories

Resources