Month Date Range Picker - Vue.js - javascript

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>

Related

Angular 6 doesn't work with Bootstrap 3 Datepicker

I'm developing an Angular 6 application.
I'm starting to create a component with a simple datepicker.
I am obliged to use this plugin: https://eonasdan.github.io/bootstrap-datetimepicker/
Even if in the file "angular.json" I put the right dependencies .css and .js (
the css works perfectly; these are the scripts .js):
"scripts": [
"src/jquery/jquery-3.1.1.min.js",
"src/bootstrap/js/bootstrap.min.js",
"src/bootstrap-datetimepicker/js/moment.min.js",
"src/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
].
My template html of my component is this:
<div class="form-group">
<label>Date</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control field-8">
<span class="input-group-addon">
<span>today</span>
</span>
</div>
</div>
<script type="text/javascript">
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
</script>
But if I click on the button the datepicker doesn't appear! (with a normal html page, everything works perfectly!). How can I resolve this problem?
Thanks!
I prefer, please do not use JQuery element with Angular 2+, you can find same plugins/component for Angular 2+.
If you want to continue with this, add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); in ngAfterViewInit method in component.ts file.
If it will not work then add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); with in timeout.
ngAfterViewInit will execute once View part is loaded in Angular 2+.
I am using Primeng components in my project.

Where is the datepicker in material ui next?

I am try use next branch of material ui https://github.com/callemall/material-ui/tree/next. Because i want use layout component. But i can not find DatePicker component!
How use DatePicker in next branch?
import {DatePicker} from 'material-ui'
WARNING in ./app/Resources/js/components/FormConstructor/Field.js
208:47-57 "export 'DatePicker' was not found in 'material-ui'
Firstly, I am in the same boat. And I dearly miss the DatePicker from the stable release of material-ui (dated 10/04/2018). I too upgraded to the #next, at the moment at v1.0.0-beta.41 and reached the state of shock to not have found the elegant DatePicker.
This is what I have noticed and now changing to -
https://material-ui-next.com/demos/pickers/
It has a date picker, which is actually based out of the TextField component having the type set to "date".
Copying as is -
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
A small suggestion would be to check if the path exists under the local node_modules. You can also quickly check the component catalogue (at https://material-ui-next.com/) for the version you are using.
Hope this helps.
At the moment to write this answer (2017-06-12) it's still not supported. See https://material-ui-1dab0.firebaseapp.com/getting-started/supported-components
As an alternative to the native controls you can use the Mobiscroll Calendar and Date picker.
Pretty customizable and comes with material styling that fits well with the general look & feel.
Calendar component
Date picker component
Full disclosure: this is a commercial component, and I am one of the makers, just though it could help someone looking for a solution.
Import as DatePickers, TimePickers, DateAndTimePickers in latest material-ui version V1.0.0-beta.26.
Eg:
import {DatePickers, TimePickers, DateAndTimePickers} from 'material-ui';
Importing Datepicker as like below is no more valid in latest version.
Eg:
import DatePicker from 'material-ui/DatePicker';
You can check out here where I did an example of creating a datepicker using material-ui (next branch)
You can either import the component or just check out the source code to learn how to create a datepicker on your own
use this
import DatePicker from 'material-ui/DatePicker';
also visit this link for completed details about material-ui date-picker.
Don't forget to install material-ui i.e npm install --save material-ui
sample code below
const DatePickerExampleSimple = () => (
<div>
<DatePicker hintText="Portrait Dialog" />
<DatePicker hintText="Landscape Dialog" mode="landscape" />
<DatePicker hintText="Dialog Disabled" disabled={true} />
</div>
);
export default DatePickerExampleSimple;

How to select time with React DatePicker

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/

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.

bootstrap 3 datepicker (eonasdan version) provides a datetime object with getDate(). not a string

I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated
If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.

Categories

Resources