Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / bootstrap-datetimepicker как ? / 25 сообщений из 30, страница 1 из 2
  1  все
13.05.2015, 11:31
    #38957183
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Привет.

Я все еще сильно нуб.
Подскажите пожалуйста, как на форме вывести datetime picker и получить из него результат ?

Вот есть такая простенькая форма:
Код: c#
1.
2.
3.
4.
                    <div class="form-group">
                        <label class="col-lg-4 control-label">Дата<br/><span style="color: red; font-size: 12px">@Html.ValidationMessageFor(x => x.Date)</span></label>
                        <div class="col-lg-6">@Html.TextBoxFor(x => x.Date, new {@class = "form-control"})</div>
                    </div>



Подскажите пожалуйста, как вообще переделать ее, чтобы использовался bootstrap-datetimepicker ?
Если в asp.Net MVC я что то уже понимаю. Но вот в JS пока совсем плох. Покажите плиз пример.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 11:43
    #38957202
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ну как-то так, если приложение по шаблону в студии создавалось и bootstrap с jquery уже из NuGet-а соответсвенно установленны:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<link href=@Url.Content("~/Content/datepicker.css") rel="stylesheet" />

<div class="form-group">
    <label class="col-lg-4 control-label">Дата<br/>
    <span style="color: red; font-size: 12px">@Html.ValidationMessageFor(x => x.Date)</span></label>
    <div class="col-lg-6">@Html.TextBoxFor(x => x.Date, new {@class = "form-control"})</div>
</div>

<script src=@Url.Content("~/Scripts/bootstrap-datepicker.js")></script>
<script>
    $('input[name=Date]').datepicker({ viewMode: 'years' });
</script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 11:46
    #38957205
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
skyANA,

Спасибо большое ! Буду набираться опыта, но пока даже нет понимания особого в js
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 11:49
    #38957210
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotekskyANA,

Спасибо большое ! Буду набираться опыта, но пока даже нет понимания особого в jsКнижку купите.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 11:53
    #38957226
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
skyANAProBiotekskyANA,

Спасибо большое ! Буду набираться опыта, но пока даже нет понимания особого в jsКнижку купите.

Какую именно книгу по рекомендуете ?

Фримена по ASp.Net я прочитал - правда какие-то главы пропустил, чтобы побыстрее. В плане asp.Net понимаение есть. Контроллеры там, экшены.
А вот в плане js пока нету.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 12:28
    #38957303
Monochromatique
Monochromatique
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Стоит различать

bootstrap datepicker

и

bootstrap date time picker


https://bootstrap-datepicker.readthedocs.org/en/latest/

https://eonasdan.github.io/bootstrap-datetimepicker/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.05.2015, 12:29
    #38957305
Алексей К
Алексей К
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
http://javascript.ru/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:43
    #38959724
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
skyANA,

Что то не получилось. Это мой первый JS код, поэтому возможно я где то очень очень сильно туплю.

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<div class="form-group">
                       ....
                    </div>



                    <div class="form-group">
                        <label class="col-lg-4 control-label">
                            Дата<br/>
                            <span style="color: red; font-size: 12px">@Html.ValidationMessageFor(x => x.Date)</span>
                        </label>
                        <div class="col-lg-6">@Html.TextBoxFor(x => x.Date, new {@class = "form-control"})</div>
                    </div>

                    <script>
                        $('input[name=Date]').datepicker({ viewMode: 'years' });
                    </script>




                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-4">.....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:45
    #38959726
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotek, нормальный пример сделайте, где видно какие скрипты Вы подключили.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:47
    #38959730
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Код: c#
1.
2.
3.
4.
@{
    var controlName = "Workplace";
    <link href=@Url.Content("~/Content/datepicker.css") rel="stylesheet" />
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:47
    #38959735
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
skyANAProBiotek, нормальный пример сделайте, где видно какие скрипты Вы подключили.
Что имеется ввиду ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:48
    #38959736
Алексей К
Алексей К
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotekЧто то не получилось.Не указал Name у input.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:51
    #38959740
Алексей К
Алексей К
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Алексей КProBiotekЧто то не получилось.Не указал Name у input.Хотя нет, указал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 12:52
    #38959741
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Алексей К,

Вот же оно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:04
    #38959752
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotekskyANAProBiotek, нормальный пример сделайте, где видно какие скрипты Вы подключили.
Что имеется ввиду ?Какие элементы <script> присутствуют на странице? View Page Source в студию!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:07
    #38959759
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Bootstrap подключён, судя по тому, что стили для class="form-control" сработали :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:13
    #38959770
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Кстати Monochromatique правильно отметил, что стоит отличать bootstrap-datepicker и bootstrap-datetimepicker.

Как-то так должно работать:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
// ...
<div class="form-group">
    <label class="col-lg-4 control-label">
        Дата<br/>
        <span style="color: red; font-size: 12px">@Html.ValidationMessageFor(x => x.Date)</span>
    </label>
    <div class="col-lg-6">@Html.TextBoxFor(x => x.Date, new {@class = "form-control"})</div>
</div>

<script>
    $('#Date').datetimepicker();
</script>
// ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:16
    #38959776
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Вернее так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
// ...
<div class="form-group">
    <label class="col-lg-4 control-label">
        Дата<br/>
        <span style="color: red; font-size: 12px">@Html.ValidationMessageFor(x => x.Date)</span>
    </label>
    <div class="col-lg-6" id="datetimepicker-for-Date">@Html.TextBoxFor(x => x.Date, new {@class = "form-control"})</div>
</div>

<script>
    $('#datetimepicker-for-Date').datetimepicker();
</script>
// ...


Bootstrap 3 Datepicker v4 Docs
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:25
    #38959781
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Нет, всё таки этот ( 17644788 ) вариант. Причём обязательно надо загрузить Moment.js: http://jsfiddle.net/6105cfmc/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:31
    #38959790
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
skyANA,

Спасибо Вам за помощь. Действительно ругается на отсутствие Moment.js.
Не смогу наверное сейчас его подключить - нужно сначала попросить разрешение у коллег :)

Буду копать дальше.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:32
    #38959794
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotekskyANA,

Спасибо Вам за помощь. Действительно ругается на отсутствие Moment.js.
Не смогу наверное сейчас его подключить - нужно сначала попросить разрешение у коллег :)

Буду копать дальше.Moment.js инсталлируется из NuGet. То есть не обязательно тянуть со стороннего CDN.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 13:53
    #38959812
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
Спасибо ) ох и сложная это штука, по первому времени )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 14:14
    #38959839
ProBiotek
ProBiotek
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
В общем все заработало.

Оказалось что кто-то в мастер-страницу ДВА раза добавил jQuery и датапикер.

Последний вопросик остался еще. Как сделать чтобы в поле убрать ВРЕМЯ, оставив только ДАТУ ?

{ viewMode: 'years' } отвечает за то, как будет выглядеть пиккер. А как изменить вывод текстового поля ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 15:45
    #38959977
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
ProBiotekВ общем все заработало.

Оказалось что кто-то в мастер-страницу ДВА раза добавил jQuery и датапикер.

Последний вопросик остался еще. Как сделать чтобы в поле убрать ВРЕМЯ, оставив только ДАТУ ?

{ viewMode: 'years' } отвечает за то, как будет выглядеть пиккер. А как изменить вывод текстового поля ?Для этого используйте datepicker, без time :) 17633007
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.05.2015, 15:51
    #38959987
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap-datetimepicker как ?
А если серъёзно, то читайте документацию по компоненту.
Код: javascript
1.
$('#Date').datetimepicker({ format: 'DD.MM.YYYY' });


http://jsfiddle.net/6105cfmc/1/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / bootstrap-datetimepicker как ? / 25 сообщений из 30, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]